August 31, 2010
Month: August 2010
How to animate text using JavaScript
Question by Hema
I want to implement animated text i.e. moving the text from bottom (half of the page) to the top like marquee. I don’t get any good code. Does any one know how this is implemented in JavaScript or jQuery or DHTML?
Thanks in advance
Answer by Cipi
Same code as the answer below but, it sets the TEXT location to be at half the page’s height, and then animates it to top:
//Calculate where is HALF of the page (half the window height)
var start_pos = screen.height/2;
//Set starting TOP location
$(".text").css("top", start_pos+"px");
//Animate to the END location, which is 0px
$(".text").animate({ top:0+"px" }, 5000, function() { alert("Animation Complete"); });
August 30, 2010
Prevent floated divs from wrapping to next line
Question by user433143
Here is my site, first of all:
www.kaiserroof.com/test/index2.html
So here is my problem. You’ll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links. Now, resize the window to slightly smaller, and the right div will drop down to the next line. Is there anyway to just not display that? So, they divs will adjust (i have a liquid layout) up to the point where they won’t fit, then, instead of wrapping the div down to the next line, it just won’t be displayed?
I hope this makes sense. Any help would be greatly appreciated.
Answer by jfs
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won’t work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
Answer by Starx
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
Preloader with JQuery OR Advanced Page Load Behavior with jQuery Progress Bar
Question by Junaid Saeed
We have a jQuery Progress Bar. Is there a way we can have the progress bar displaying the loading of an HTML page which has PHP, CSS & JavaScript and all in it?
Like a preloader and when the page has been downloaded and rendered fully then display it.
If not with progress bar can we make a preloader with jQuery?
Answer by Starx
Once.. I tried to create this, but It was not pretty. I listed all the things I need to have on a page and increased the progress bar One by one as it was loaded. It was very tremendously long chain. Here is a sample of what I did.
$.getScript('js/lib/ui.js',function() { //Load the Jquery UI
//Call back function after the loading is complete
$("#progressinfo").html("Loading Widgets ..."); //Give the information
$.getScript('js/lib/widget.js',function() { // Load the jquery ui Widget
//Call back function after the loading is complete
$("#progressinfo").html("Loading Widgets: Progress Bar ..."); // Inform
$.getScript('js/lib/widgets/progressbar.js',function() { // Finally load the Jquery UI progressbar
//Call back function after the loading is complete
$("#progressbar").progressbar({ value: 5 }); // change the value of the UI informing the total amount of loadding completion
$("#progressinfo").html("Loading Widgets: some script ..."); //Inform of another script
$.getScript('somescript.js',function() { // Load another script
//Call back function after the loading is complete
$("#progressbar").progressbar({ value: 6 }); // change the value of the UI informing the total amount of loadding
});
});
});
});
August 28, 2010
Pure CSS Rounded Corners in IE6-8 (JQuery Accepted)
Question by BHare
There are a lot of JQuery plugins to give rounded corners to browsers that dont support CSS3. They either don’t work or have an ugly effect where you see it unstyled, and then the JS kicks in and finally makes them rounded.
I am looking for a solution that renders rounded corners before visibility, looking for a seamless, or near seamless solution.
The best match I have come to so far if the use of .htc files with www.css3pie.com. There is still that delay (Not sure if it can even be solved).
css3pie is around 26k compressed, the owner stated that if you have JQuery there could be scripts that would be less. (I plan on using JQuery throughout anyways).
Ideally, I’d like it to support gradients, border-radius, and box-shadow. Currently css3pie does all of this how I need, except for box-shadowing. It messes up if the background is transparent as indicated here: http://github.com/lojjic/PIE/issues#issue/12
I am willing to accept inability of any of these features in IE6.
I guess maybe I just can’t have one’s cake and eat it too. For now, I will be sticking with css3pie.com and putting up with annoying delay, and not allowing for box-shadow in IE. Not a huge deal because IE9 is suppose to fix that -crossing fingers-
Answer by Erik
The CSS3 PIE library handles a lot of things for IE6/7/8 including:
- Border Radius (rounded corner)
- Box Shadow
- Border Image
- Gradient Backgrounds
Its pretty handy.
Answer by Starx
Use jquery rounded corner plugin
http://jquery.malsup.com/corner/
And trigger the plugin in every possible events to ensure its loaded
<script>
$(this).corner(); //This will trigger the function as soon as this line loads
$(document).ready(function() { $(this).corner(); }); //not necessary
$(window).load(function() { $(this).corner(); });//not necessary
</script>
August 27, 2010
PHP Get method not sending full input
Question by Jackass
I have a drop down list that is dynamically generated using a mySQL database using the following code:
$region = mysql_query("select region_name from region", $connection);
echo "<select name=region>Region</option>";
while ($row = $mysql_fetch_array($region))
{
echo "<option value =$row[region_name]>$row[region_name]</option>";
}
echo "</select>"
This prints out the list perfectly fine however when I submit the form using the GET method any region name that has a space in it will not be passed through properly in the URL. Instead of “South Australia” it will only give me “South”
I know the URL should end up being:
http://foo.com/query.php?region=South+Australia
But instead the +Australia just doesn’t appear.
Anybody know what stupid stuff I’ve done or what I’m missing??
Answer by NAVEED
use single quote for value in option tag:
Try this in while loop:
echo "<option value='$row[region_name]'>$row[region_name]</option>";
Answer by Starx
There is an error in your code………
echo "<select name=region>Region</option>"; should be
echo "<select name='region'><option>Region</option>";
and while giving value do this
echo "<option value='$row[region_name]'>$row[region_name]</option>";
August 25, 2010
loading html page inside div
Question by coder247
how can I load an html page inside a div. With the ‘object’ tag it’s loading, but I think it’s not a good approach. It is not an external file. Is dojo good for this?
Answer by coder247
This also works… using dojo…
<script type="text/javascript">
var url = dojo.moduleUrl("dijit.form", "help.html");
dojo.xhrGet({
url: url,
load: function(html){
dojo.byId("mycontent").innerHTML = html;
}
});
</script>
<div id="mycontent">
</div>
Answer by Starx
August 24, 2010
description box on mouseover
Question by Артём Царионов
i am playing with the onmouseover event in javascript
i would like a little box to pop up and remain up until there is no onmouseover anymore
i think it’s called a decription box, but i am not sure?
how do i get a little box to pop up with custom text when i put my mouse over certain text>? and i need it to disappear once i move the mouse to a different object
Answer by casablanca
Assuming popup is the ID of your “description box”:
HTML
<div id="parent">
This is the main container.
<div id="popup" style="display: none">some text here</div>
</div>
JavaScript
var e = document.getElementById('parent');
e.onmouseover = function() {
document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('popup').style.display = 'none';
}
Alternatively you can get rid of JavaScript entirely and do it just with CSS:
CSS
.parent .popup {
display: none;
}
.parent:hover .popup {
display: block;
}
Answer by Starx
Well, I made a simple two liner script for this, Its small and does what u want.
Check it
http://jsfiddle.net/9RxLM/
Its a jquery solution 😀
August 23, 2010
Always ensuring that div tag is at top of page using jquery
Question by Roland
I have a div tag <div id="customError">Error</div> I want this div tag to always appear at the top of the page using jquery, so with otherwords even if the page is scrollable I want it to be always visible and on top of the page almost like the stackoverflow notification bar. Is this possible using JQuery? I tried a number of things and it disappears when the page is scrolled down. Any help advise will be appreciated.
Answer by fantactuka
You can use css only:
#customError {
position: fixed;
top: 0;
left: 0;
width: 100%;
/* IE6 */
_position: absolute;
_top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");
}
Answer by Starx
What happens if I don't call session_start()?
Question by Summer
I’m trying to make many of the pages in my site cache-able as HTML. As a result, I won’t be able to call session_start() on those pages. Do sessions work if you don’t call them on every single page?
Answer by WoLpH
If you don’t call session_start() than you won’t have $_SESSION available. But if the page is a static html file anyway than you won’t need $_SESSION for that page so you don’t have to worry about it.
You only need it on pages where you do something with $_SESSION
Answer by Starx
session_starts(), either starts the session, or allows you to use the session variables. If you want to start a session and store values there or you want to use the session values already there then, you must use session_start()
Do sessions work if you don’t call them on every single page?
NO
