You can use [`$.ui.version`][1], it&#39;s actually the property jQuery UI looks for when determining if it should load itself (if it&#39;s already there, abort).

For example [here&#39;s a fiddle including version 1.8.4][2].

Unfortunately, `$.ui.version` was added in jQuery-UI version 1.6.

For earlier versions, you can check for `$.ui` though.

So, in this case, the following might be good enough:

    var version = $.ui ? $.ui.version || &quot;pre 1.6&quot; : &#39;jQuery-UI not detected&#39;;




  [1]: http://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.core.js#L21
  [2]: http://jsfiddle.net/nick_craver/YtE2J/

Our web app is rendered totally on the browser.&lt;br/&gt;The server only talks to the browser through JSON messaging.

As a result, we only need a single page for the app and mostly all the `&lt;a&gt;` tags do not have a real `href` pointing to other pages.

In my quest of removing unnecessary things I was wondering if I can get rid of the zillions of `void(0)` we have in our code, as they seem useless:

	&lt;a onclick=&quot;fn()&quot;&gt;Does not appear as a link, because there&#39;s no href&lt;/a&gt;
	&lt;a href=&quot;javascript:void(0)&quot; onclick=&quot;fn()&quot;&gt;fn is called&lt;/a&gt;
	&lt;a href=&quot;javascript:&quot; onclick=&quot;fn()&quot;&gt;fn is called too!&lt;/a&gt;


**Does anybody knows if using `href=&quot;javascript:&quot;` can cause a problem?**&lt;br/&gt;
It works even on IE7...

Please don&#39;t spend your valuable time to tell me inline javascript is bad, as this is generated by a template engine :)

href=&quot;javascript:&quot; vs. href=&quot;javascript:void(0)&quot;

Let&#39;s say following is the directory structure of my website :
![DIR STRUCTURE][1]

Now in `index.html` I can simply refer images like:

    &lt;img src=&quot;./images/logo.png&quot;&gt;

But I want to refer the same image from `sub.html`. What should be the `src`?


  [1]: http://i.stack.imgur.com/0ityY.png

Pick images of root folder from sub-folder

This should be an easy question, but how do I detect the jQuery-UI version?

This is for a Greasemonkey script and the (current) target page appears to be running jQuery-UI, 1.5.2.  But, different target pages may run different versions.

`console.log ($.ui);` did not show anything useful/obvious for version detection.



How do I get the jQuery-UI version?

This should be an easy question, but how do I detect the jQuery-UI version?
This is for a Greasemonkey script and the (current) target page appears to be running jQuery-UI, 1.5.2. But, different target pages may run different versions.
<code>console.log ($.ui);</code> did not show anything useful/obvious for version detection.

I think this may not be possible, will try and explain as best as I can.
I have a page containing tabs (jquery powered), controlled by the following:

I&#39;m using this code, as provided by another user from a previous question.

    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function() {
         
         $(&#39;html, body&#39;).animate({scrollTop:0}); // this is my &quot;fix&quot;
               
            var tabContent = $(&quot;.tab_content&quot;);
            var tabs = $(&quot;#menu li&quot;);
            var hash = window.location.hash;
         tabContent.not(hash).hide();
            if(hash==&quot;&quot;) {
          $(&#39;#tab1&#39;).fadeIn();
         }
            tabs.find(&#39;[href=&#39; + hash + &#39;]&#39;).parent().addClass(&#39;active&#39;);
        
            tabs.click(function() {
                $(this).addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;);
                tabContent.hide();
                var activeTab = $(this).find(&quot;a&quot;).attr(&quot;href&quot;);
        
                $(activeTab).fadeIn();
               return false;
            });
        
        });
    &lt;/script&gt;

this code works great when I visit the &quot;tabs&quot; page directly.

however, I need to link to invidual tabs from other pages - so to do this, the code gets the `window.location.hash` then shows the appropiate tab.

the page doesn&#39;t &quot;jump&quot; to the anchor because of &quot;return false&quot;.

this event is only triggered on a click event however. hence, if i visit my &quot;tabs&quot; from any other page, the &quot;jump&quot; effect is triggered. To combat this I automatically scroll to teh top of the page, but I would rather this didn&#39;t happen.

is there any way to simulate &quot;return false&quot; when the page loads, preventing the anchor &quot;jump&quot; from occuring.

hope this is clear enough.

thanks




How to disable anchor &quot;jump&quot; when loading a page?

I am building a website which I am publishing with `div`s. When I refresh the page after it was scrolled to position X, then the page is loaded with the scroll position as X.

How can I force the page to be scrolled to the top on page refresh?

* What I can think of is of some JS or jQuery run as `onLoad()` function of the page to **SET** the pages scroll to top. But I don&#39;t know how I could do that.

* A better option would be if there is some property or something to have the page loaded with its scroll position as default (i.e. at the top) which will be kind of like *page load*, instead of *page refresh*.

Force page scroll position to top at page refresh in HTML

How can i find the next element by class.

i tried with `$(obj).next(&#39;.class&#39;);` but this returns classes only in `$(obj)` parent. 
I need to take the next element anywhere throughout the code by class name.
Because my code looks like 

    &lt;table&gt;
    &lt;tr&gt;&lt;td&gt;&lt;div class=&quot;class&quot;&gt;First&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;&lt;div class=&quot;class&quot;&gt;Second&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;

Is this possible?

jquery, find next element by class

jQuery can obviously fadeIn/fadeOut text easily. But what if you want to change the text from one thing to another? Can this happen with a transition?

Example:

    &lt;div id=&#39;container&#39;&gt;Hello&lt;/div&gt;

Can one change the text *Hello* to *World* but have it change with a transition (like a fade or some effect) instead of changing instantly?

jQuery text fade/transition from one text to another?

I want to use jQuery to delete cookies; I have tried this:

    $.cookie(&#39;name&#39;, &#39;&#39;, { expires: -1 });

But when I refresh the page, the cookie is still there:

    alert(&#39;name:&#39; +$.cookie(&#39;name&#39;));

Why?

How to delete a cookie using jQuery?

I&#39;m using the JQuery Autocomplete in one of my forms.

The basic form selects products from my database. This works great, but I&#39;d like to further develop so that only products shipped from a certain zipcode are returned. I&#39;ve got the backend script figured out. I just need to work out the best way to pass the zipcode to this script.

This is how my form looks.

    &lt;form&gt;
    
    &lt;select id=&quot;zipcode&quot;&gt;
    
    &lt;option value=&quot;2000&quot;&gt;2000&lt;/option&gt;
    &lt;option value=&quot;3000&quot;&gt;3000&lt;/option&gt;
    &lt;option value=&quot;4000&quot;&gt;4000&lt;/option&gt;
    
    &lt;/select&gt;
    
    &lt;input type=&quot;text&quot; id=&quot;product&quot;/&gt;
    
    &lt;input type=&quot;submit&quot;/&gt;
    
    &lt;/form&gt;

And here is the JQuery code:


    $(&quot;#product&quot;).autocomplete
    ({
         source:&quot;product_auto_complete.php?postcode=&quot; + $(&#39;#zipcode&#39;).val() +&quot;&amp;&quot;,
         minLength: 2,
         select: function(event, ui){
            	
            		             //action
    	
                                     }
    });



This code works to an extent. But only returns the first zipcode value regardless of which value is actually selected. I guess what&#39;s happening is that the source URL is primed on page load rather than when the select menu is changed. Is there a way around this? Or is there a better way overall to achieve the result I&#39;m after?

How do I pass an extra parameter to Jquery Autocomplete field?

I have a design where I have a list of &quot;available boxes&quot;, users take boxes by dragging them from the &quot;available boxes&quot; list to their &quot;My Boxes&quot; list.

Users more often than not take multiple boxes at a time (max 20), once they have finished with the boxes they drag them back to the &quot;available boxes&quot; list to return them.

jQuery sortable allows me to drag one box at a time which from a user perspective is undesirable.  I&#39;ve been unable to come up with a simple solution to the issue.

I may have to come up with a different UI method entirely, but first does anyone have any suggestions on how this might be accomplished?

Thanks!

jQuery Sortable - Select and Drag Multiple List Items

We&#39;re currently pulling jQuery and jQueryUI (and jQueryUI CSS) libraries from the google CDN. I like this because I can call `google.load(&quot;jquery&quot;, &quot;1&quot;);`                          
 and the latest jQuery 1.x.x will be used.

Now I am to pull the libraries locally because of security.

I&#39;m happy to pull them locally but I&#39;m wondering what are some of the other benefits and pitfalls to watch out for?



Benefits vs. Pitfalls of hosting jQuery locally

I decided to use the JQuery UI Datepicker script for picking dates. Below is part of my code, and the way I integrated it into my PHP page:

    &lt;link type=&quot;text/css&quot; href=&quot;css/south-street/jquery-ui-1.8.6.custom.css&quot; rel=&quot;stylesheet&quot; /&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-ui-1.8.6.custom.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
	$(function(){
		// Datepicker
		$(&#39;#datepicker&#39;).datepicker({ dateFormat: &#39;yy-mm-dd&#39; });
		//hover states on the static widgets
		$(&#39;#dialog_link, ul#icons li&#39;).hover(
			function() { $(this).addClass(&#39;ui-state-hover&#39;); }, 
			function() { $(this).removeClass(&#39;ui-state-hover&#39;); }
		);
	});
    &lt;/script&gt;

And:

    	// date picker (embeds JQuery script)
  	echo &#39;&lt;label for=&quot;datepicker&quot;&gt;Date: &lt;/label&gt;&#39;;
	echo &#39;&lt;input type=&quot;text&quot; name=&quot;datepicker&quot; id=&quot;datepicker&quot; /&gt;&#39;;
	echo &#39;&lt;div id=&quot;datepicker&quot;&gt;&lt;/div&gt;&#39;;

Pretty much according to the JQuery UI instructions.

Now my question is: *how can I disable manual inputs in the text input field*? I only want the JQuery Datepicker script to be able to fill the text field. As far as I can see, the script currently prevents the user from entering any non-numerical characters into the text field, but any combination of numbers is allowed (therefore, gibberish like &quot;95460829468&quot; is allowed).

How to disable manual input for JQuery UI Datepicker field?

How can I use jQuery UI to display an always-visible datepicker widget?

Always visible jQuery UI DatePicker

The information I need is in a meta tag. How can I access the `&quot;content&quot;` data of the meta tag when `property=&quot;video&quot;`?

**HTML:**

    &lt;meta property=&quot;video&quot; content=&quot;http://video.com/video33353.mp4&quot; /&gt;

How do I get the information from a meta tag with JavaScript?

I&#39;m making a Greasemonkey script and would like to open a new tab which will not display a URL but some HTML that is part of the script. So basically I want to do something like this (which is obviously not working):

    window.open(&#39;&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;&#39;);
    or
    GM_openInTab(&#39;&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;&#39;);


Any hints are welcome!

Open a new tab with custom HTML instead of a URL

I&#39;m writing a Greasemonkey user script, and want the specific code to execute when the page completely finishes loading since it returns a div count that I want to be displayed.

The problem is, that this particular page sometimes takes a bit before everything loads.

I&#39;ve tried, document `$(function() { });` and `$(window).load(function(){ });` wrappers. However, none seem to work for me, though I might be applying them wrong.

Best I can do is use a `setTimeout(function() { }, 600);` which works, although it&#39;s not always reliable.

What is the best technique to use in Greasemonkey to ensure that the specific code will execute when the page finishes loading?



Userscript to wait for page to load before executing code techniques?

It doesn&#39;t give an error, and I put a `console.log(&#39;loaded userscript wifi-autologin&#39;)`, the `console.log` works, but the intended effect of the document.addEventListener doesn&#39;t happen. After doing a bit more debugging, making it print that the addEventListener was called, I discovered that it wasn&#39;t being called.

Source of script:


    // ==UserScript==
    // @name        wifi-autologin
    // @namespace   lf-ns
    // @description Hopefully autologins to a captive portal
    // @include     *://1.1.1.1/*
    // @version     1
    // @run-at document-end
    // ==/UserScript==
    
    document.addEventListener(&#39;load&#39;, submitAction);

Why doesn&#39;t document.addEventListener(&#39;load&#39;, function) work in a greasemonkey script?

I&#39;m trying to set the background image of the body, but only where it uses the class `banner_url`.  The HTML is as follows:

    &lt;body id=&quot;app_body&quot; class=&quot;banner_url desktopapp&quot; data-backdrop-limit=&quot;1&quot;&gt;

Basically, I would like to force the page to use the following CSS instead:

    .banner_url {
        background: url(&#39;http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg&#39;) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

I am trying to do this using Greasemonkey if it makes any difference.  Does anyone know how I can go about this?  I started with the following, however haven&#39;t had much luck: 

    function randomBG(){
        document.getElementsByClassName(&quot;banner_url&quot;).style.backgroundImage=&quot;url(&#39;http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg&#39;)no-repeat center center fixed;&quot;;
    } 
    randomBG();

Content Type	Original Author	Original Content on Stackoverflow
Question	Brock Adams	View Question on Stackoverflow
Solution 1 - Jquery	Nick Craver	View Answer on Stackoverflow

How do I get the jQuery-UI version?

Jquery Problem Overview

Jquery Solutions

Solution 1 - Jquery

Pick images of root folder from sub-folder

href="javascript:" vs. href="javascript:void(0)"

Attributions