Databases
StackOverflow2013
Postsdbo
POHTML Dropdown Form with links in the dropdown
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML Dropdown Form with links in the dropdown
    text
    copied!<p>I currently have 2 links on the page, <a href="http://test.medialayer.net/" rel="nofollow">http://test.medialayer.net/</a>, which I'd like to put in an html dropdown, current code below, any anchor with the class ezjax will load the linked page into the div, ezjax content.</p> <pre><code>&lt;div id="homePagePropertySearchBox"&gt; &lt;a class="ezjax" href="../../../searchForms/searchOne.html"&gt;Search One&lt;/a&gt; &lt;a class="ezjax" href="../../../searchForms/searchTwo.html"&gt;Search Two&lt;/a&gt; &lt;div id="ezjax_content"&gt; &lt;!-- THIS IS THE CONTAINER WHERE THE CONTENT WILL BE LOADED --&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>I found this code below which is going the direction I want to go, except onchange I want it to just open my link in the ezjax content div</p> <pre><code>&lt;form action="../"&gt; &lt;select onchange="window.open(this.options[this.selectedIndex].value,'_top')"&gt; &lt;option value=""&gt;Choose a destination...&lt;/option&gt; &lt;option value="http://www.yahoo.com/"&gt;YAHOO&lt;/option&gt; &lt;option value="http://www.google.com/"&gt;GOOGLE&lt;/option&gt; &lt;option value="http://www.altavista.com/"&gt;ALTAVISTA&lt;/option&gt; &lt;/select&gt; &lt;/form&gt; </code></pre> <p>Once again my thanks to all those who take a look. Chuck</p> <p>For reference here is the rest of the code that makes the loading happen.</p> <p>on page</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function(){ $('.ezjax').ezjax({ container: '#ezjax_content', initial: '../../../searchForms/searchOne.html', effect: 'slide', easing: 'easeOutBounce', bind: 'a' }); </code></pre> <p>linked js file</p> <pre><code>jQuery.fn.ezjax = function(o) { obj = jQuery(this).attr('class'); // Defaults var o = jQuery.extend( { container: '#ezjax_content', initial: null, effect: null, speed: 'normal', easing: null, bind: '.'+obj },o); // Load initial if(o.initial!=null){ jQuery(o.container).load(o.initial,function(){ bind(); }); } // Re-bind for any links internal to the content function bind(){ jQuery(o.container+' '+o.bind).ezjax({ container: o.container, initial: null, effect: o.effect, speed: o.speed, easing: o.easing }); } // Main functionality return this.each(function() { jQuery(this).click(function(){ var url = jQuery(this).attr('href'); // Check for transition effect if (o.effect != null) { // Run effect switch(o.effect){ // Slide case 'slide': jQuery(o.container).animate({height:"0px"}, o.speed, function(){ jQuery(o.container).css('overflow','hidden'); // Fix glitchies jQuery(o.container).load(url, function(){ jQuery(o.container).animate({ height: jQuery(o.container).children().height() + 20 },o.speed,o.easing,function(){ jQuery(o.container).css('overflow','visible'); // Undo glitchy fix }); bind(); }); }); break; // Fade case 'fade': jQuery(o.container).animate({ opacity: 0.0 }, o.speed, function(){ jQuery(o.container).load(url, function(){ jQuery(o.container).animate({ opacity: 1.0 }, o.speed); bind(); }); }); break; } } else { // Standard load (no effect) jQuery(o.container).load(url,function(){ bind(); }); } // Keeps the href from firing return false; }); }); }; }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload