Question

I’m trying to write some jQuery for my first-ever mobile version of a particular page. If I detect a small browser size, I’m showing only a list of articles. Once a user clicks on an article, I want the list to minimize and the article to be shown in the main content. I’m trying to do this by hiding the list when an article is clicked on, but I can barely get beyond the basic step of making the page to anything at all. Here’s my attempt to merely put a border around the article list on mouseover:

<script>
    if( $(window).width() < 481 && $(window).width() > 0 ) {
        $("div.st_tabs_container").mouseover(function () {
            alert("asdfasd");
            $("div.st_tabs_container").css("border", "3px double red");
           alert("swear words");
        });
    } else {
    }
</script>

The only way I can get this to do anything, at all, is by writing (“*”).mouseover(function){ . If I’m selecting everything, the mouseover will work and the st_tabs_container will get a red border and the alerts will go off. If I try to select anything else (.i.e $(“div.st_tabs_container”) ) it does not work. Can anyone explain this? I’m sure it’s something simple, but I am not getting it. To make matters worse, the actual element I need to do things on click is div.st_vertical ul.st_tabs a.st_tab_active . I have had no luck writing code that selects that. Any and all wisdom would be much appreciated!

Answer 1

do something like this for example: http://jsfiddle.net/ZMBWZ/
if it doesn’t work, make the screen smaller

html:

<div class="st_tabs_container"></div>

css:

div{
 height: 100px;
  width: 100px;
  border: 1px solid red;
}

Jquery:

$(function () {
    if ($(window).width() < 481 && $(window).width() > 0) {
        $("div.st_tabs_container").mouseover(function () {
            alert("asdfasd");
            $("div.st_tabs_container").css("border", "3px double red");
            alert("swear words");
        });
    }else{}
});