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"); });

​

Answer by Starx

use jquery

  $('#mydiv').animate({
    top: 0
  }, 5000, function() {
    // Animation complete.
  });

Check the demo here

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:

http://www.thecssninja.com/xhtml/ie6-min-width-solutions

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

Use jquery

$("#mydiv").load("myexternalfile.html");
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

use this

#customError { 
   position:fixed;
   top:0;
   left:0;
}

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

...

Please fill the form - I will response as fast as I can!