Jquery slider load every tab -
i have problem jquery tabs , slider.. problem when ı click slider item example 4's element of slider.. load every tabs 4 element.i want make when click 1 element of slider. can load active tab.
html
<title>jquery ui slider - slider scrollbar</title> <body> <div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> <div class="scroll-content"> <div class="scroll-content-item ui-widget-header"></div> <div class="scroll-content-item ui-widget-header"> <div class="arabadiv" onclick="yukle()" style="width:100px; height:100px; background-color: darkviolet "></div> </div> <div class="scroll-content-item ui-widget-header"> <div style="width:100px; height:100px; background-color:red"></div> </div> <div class="scroll-content-item ui-widget-header">4</div> <div class="scroll-content-item ui-widget-header">5</div> <div class="scroll-content-item ui-widget-header">6</div> <div class="scroll-content-item ui-widget-header">7</div> <div class="scroll-content-item ui-widget-header">8</div> <div class="scroll-content-item ui-widget-header">9</div> <div class="scroll-content-item ui-widget-header">10</div> <div class="scroll-content-item ui-widget-header">11</div> <div class="scroll-content-item ui-widget-header">12</div> <div class="scroll-content-item ui-widget-header">13</div> <div class="scroll-content-item ui-widget-header">14</div> <div class="scroll-content-item ui-widget-header">15</div> <div class="scroll-content-item ui-widget-header">16</div> <div class="scroll-content-item ui-widget-header">17</div> <div class="scroll-content-item ui-widget-header">18</div> <div class="scroll-content-item ui-widget-header">19</div> <div class="scroll-content-item ui-widget-header">20</div> </div> <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> <div class="scroll-bar"></div> </div> </div> <div style="clear:left"></div> <div id="tabs" class="tabs-bottom"> <ul> <li><a href="#tabs-1">genel bakış</a> </li> <li><a href="#tabs-2">tasarım</a> </li> <li><a href="#tabs-3">aksesuar</a> </li> <li><a href="#tabs-4">model</a> </li> <li><a href="#tabs-5">renk</a> </li> <li><a href="#tabs-6">fiyat</a> </li> </ul> <div class="tabs-spacer"></div> <div style="width:auto; height:800px; background-color:red" id="tabs-1"></div> <div style="width:auto; height:900px; background-color:yellowgreen" id="tabs-2"></div> <div style="width:auto; height:800px; background-color:darkcyan" id="tabs-3"></div> <div style="width:auto; height:800px; background-color:bisque" id="tabs-4"></div> <div style="width:auto; height:800px; background-color:firebrick" id="tabs-5"></div> <div style="width:auto; height:800px; background-color:ghostwhite" id="tabs-6"></div> java
$(function () { $("#tabs").tabs(); // fix classes $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *") .removeclass("ui-corner-all ui-corner-top") .addclass("ui-corner-bottom"); // move nav bottom $(".tabs-bottom .ui-tabs-nav").appendto(".tabs-bottom"); }); $(function () { //scrollpane parts var scrollpane = $(".scroll-pane"), scrollcontent = $(".scroll-content"); //build slider var scrollbar = $(".scroll-bar").slider({ slide: function (event, ui) { if (scrollcontent.width() > scrollpane.width()) { scrollcontent.css("margin-left", math.round( ui.value / 100 * (scrollpane.width() - scrollcontent.width())) + "px"); } else { scrollcontent.css("margin-left", 0); } } }); //append icon handle var handlehelper = scrollbar.find(".ui-slider-handle") .mousedown(function () { scrollbar.width(handlehelper.width()); }) .mouseup(function () { scrollbar.width("100%"); }) .append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>") .wrap("<div class='ui-handle-helper-parent'></div>").parent(); //change overflow hidden slider handles scrolling scrollpane.css("overflow", "hidden"); //size scrollbar , handle proportionally scroll distance function sizescrollbar() { var remainder = scrollcontent.width() - scrollpane.width(); var proportion = remainder / scrollcontent.width(); var handlesize = scrollpane.width() - (proportion * scrollpane.width()); scrollbar.find(".ui-slider-handle").css({ width: handlesize, "margin-left": -handlesize / 2 }); handlehelper.width("").width(scrollbar.width() - handlesize); } //reset slider value based on scroll content position function resetvalue() { var remainder = scrollpane.width() - scrollcontent.width(); var leftval = scrollcontent.css("margin-left") === "auto" ? 0 : parseint(scrollcontent.css("margin-left")); var percentage = math.round(leftval / remainder * 100); scrollbar.slider("value", percentage); } //if slider 100% , window gets larger, reveal content function reflowcontent() { var showing = scrollcontent.width() + parseint(scrollcontent.css("margin-left"), 10); var gap = scrollpane.width() - showing; if (gap > 0) { scrollcontent.css("margin-left", parseint(scrollcontent.css("margin-left"), 10) + gap); } } //change handle position on window resize $(window).resize(function () { resetvalue(); sizescrollbar(); reflowcontent(); }); //init scrollbar size settimeout(sizescrollbar, 10); //safari wants timeout }); css
.scroll-pane { overflow: auto; width: 99%; float:left; } .scroll-content { width: 2440px; float: left; } .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; } .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; } .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } /* force height tabs don't jump content height changes */ #tabs .tabs-spacer { float: left; height: 200px; } .tabs-bottom .ui-tabs-nav { clear: left; padding: 0 .2em .2em .2em; } .tabs-bottom .ui-tabs-nav li { top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0; } .tabs-bottom .ui-tabs-nav li.ui-tabs-active { margin-top: -1px; padding-top: 1px; }
i'm struggling see mean. if you'd load elements selected make it's class equal id of want load , use identify load.
html
<div id="selected_item" class="item_to_load"> java
var loadme = document.getelementsbyid("selected_item"); function showorload () { var $item-to-load = document.getelementsbyclassname(loadme); } it might need give each slider item id?
if gave slider items unique id hide 'class' , show 'id'.
i.e.
html
<div id="uniqueid" class="scroll-content-item ui-widget-header">14</div> jquery
$('.scroll-content-item').hide(); $('#uniqueid').show(); update
i think you're saying need add class slider items. when select tab item need hide corresponding slider items.
Comments
Post a Comment