jQuery hide + CSS hover issue with mouse

Question 1

Question by Xander Guerin

Has anyone else noticed that when you have the CSS:hover effect applied to an element, hide that element and keep the mouse perfectly still, the hover effect is still present until the mouse moves?

I’ve has a search but can’t seem to find any other threads similar. I know it is probably easy but I cannot find the solution and it will cause me to end up in Bedlam.

To see what I mean, take a look at this Fiddle: http://jsfiddle.net/NsMKN/ and

Click the black box to expand it
move the cursor outside the original blackness like where the red X is
click to hide and keep the mouse cursor PERFECTLY still
notice the black box is still red???

When the cursor moves, the :hover is not applied as it should, but it there a way to do this without having to move the mouse and without having to apply the hover effect using jQuery myself (leaving it to CSS)?

Update: I’ve marked Starx as the answer as it does appear to be an IE thing. Thanks for the help guys.

awesome piccy

Answer

Answer by Starx

Starx

Let me split your code.

<div class="tester">
    <div class="content">
        apple, banana, carrot, lettuce, celery, beetroot
    </div>
</div>

Here, the div .content is inside .tester which wraps itself with respect to the what is inside, on general cases.

.tester:hover
{
   background-color:red; 
}

Your CSS is also applied to the same wrapper div i.e. .tester. So, that when the mouse is over to this part, its background color will change.

$('.tester').click(function () {
    $(this).children('.content').toggle();
});

Now, when you toggle the inner element to make it visible. The dimensions of the .tester will change according to the inner elements. Although it is fixed in your case, DOM also has to consider its children. Try to do the same with this fiddle.

Example Showing the Issue

Due to this reason The the mouse will still be over the div .tester. So, style of .tester:hover will still be applied.

Now, when you the toggle .content, the wrapper div .tester will retain the previous state, until further event occurs.

Browsers like IE, does not seem to update its DOM properties until next event occurs.

Question 2

Question by KenavR

KenavR

i am modifying a empty <div> with the .html() method of jQuery. When i refresh the page the added code disappears.

$('#div').html($('#div').html() + '<div>'+obj.name+'&nbsp;<a href="">(x)</a>');

Is it possible to change the behaviour or use other methods?

thanks

Edit:

to calify my problem

Maybe it is a design error. It is a form with some fields and a second form where the user can upload files, after a file is uploaded i add the filename and a delete link in a div. If the user submits the form the program connects the created object and the files. It is not really a page where anybody should need to refresh, but it can happen and then the files are saved in the database but the information is lost to connect it with the form object.

Answer

Answer by Starx

Starx

Of course, whenever you are reloading the page, all the elements will go back to the original state (as loaded from the server). However there are ways of solving this.

Using cookies
Using HTML local storage

You have to understand how the client side scripting works. The modification happens on the client’s system, not on the server, from where the script is going to load.

Question 3

Question by baburao113

baburao113

I’ve been trying this code since 3 days in a row until a certain time (minutes or seconds) but unable to solve the problem.

My target is to redirect visitor to 10 random URLs which are being selected from a text file. The user will see a certain page for a certain time and then redirect to another page again, the number of pages he will be redirected to is complete RANDOM.

PROBLEM:

The problem is the visitor is not being redirected to any other page which is randomly selected from a text file, instead it is just refreshing the page… But I want to redirect him to other pages from the text file.. Hope you guys understood me by now.

EDIT: Found the problem. Actually the $rand_link is having NULL as it’s value.. { [0]=> NULL } Don’t know why…. ANy solution? Checked the ‘BBnormalLinks.txt’ file for it’s permissions and that file is having some links in it for sure because I just checked it..

Thanks,

Here is the CODE:

<?php // Generate Random Nubmers.. 2 ********
            $numbers2 = range(13,70);

            shuffle($numbers2);

            for ($j=0;$j<1;$j++)
            {
            $numbers2[$j];
            }
                $seconds = numbers2[0];

            //////// For Random URL of Site
            $links = file('BBnormalLinks.txt');
        $rand_link = $links[ mt_rand(0, count($links) - 1) ];                   

                header("refresh:". $seconds .";url=". $rand_link); ?>

Answer

Answer by Starx

Starx

The syntax is correct but some pointers that can cause this are

Some text have been outputted before the header is passed.
The random page, is not being generated, thus ending up refreshing the same page again and again.

I have a very strong feeling, that your $rand_link is returning blank or null.

Update:

After a few discussion, the problem was the evil path again.

$links = file('patotofileBBnormalLinks.txt');

As baburao113, quoted

I had to move that file to wordpress theme folder lol! Problem resolved 🙂

Question 4

Question by Q7898339

Q7898339

I’m using tabs, but wondering if it’s possible to “refresh” tab content onclick?

Answer

Answer by Starx

Starx

Yes it is possible, but you dont need onClick event for this I think

use this

<div id="example">
     <ul>
         <li><a href="ajaxpage1.php"><span>Content 1</span></a></li>
         <li><a href="ajaxpage2.php"><span>Content 2</span></a></li>
         <li><a href="ajaxpage3.php"><span>Content 3</span></a></li>
     </ul>
</div>

Notice that: instead of giving the id of the tab’s division, a page link given
so every time you click on the tabs, it updates it

this degrades gracefully – the links, e.g. the content, will still be accessible with JavaScript disabled.

ps: I am assuming that you having a
working tabs

Tag: refresh

jQuery hide + CSS hover issue with mouse

Question by Xander Guerin

Answer by Starx

jQuery html disappears on refresh

Question by KenavR

Answer by Starx

PHP Redirect Within website

Question by baburao113

Answer by Starx

Update:

use jquery to refresh div tab onclick?

Question by Q7898339

Answer by Starx

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