I have this code:
<script>
$(function() {
$("#tabs").tabs({ event: "mouseover" });
$("#tabs").tabs("add","#tab-4","Friends Discussions");
$("#tabs").tabs("add","#tab-5","Announcements");
$("#tabs").tabs("add","#tab-6","Contact");
});
</script>
<div class="demo" align="center" >
<div id="tabs">
<ul>
<li>Recent Discussions</li>
<li>Most Popular Discussions</li>
<li>Most Viewed Discussions</li>
</ul>
<div id="tabs-1">
<p>111111111111</p>
</div>
<div id="tabs-2">
<p>222222222222</p>
</div>
<div id="tabs-3">
<p>333333333333333</p>
</div>
<div id="tabs-4">
<p>4444444444</p>
</div>
<div id="tabs-5">
<p>555555555</p>
</div>
<div id="tabs-6">
666666666
</div>
</div>
</div>
Tabs 4, 5 and 6 have got the same content as appears in tab 1, 2 and 3. Why does that happen?
There's a typo in your code, you are adding #tab-n, yet in your code they have the Id tabs-n.
Try this:
$("#tabs").tabs("add","#tabs-4","Friends Discussions");
$("#tabs").tabs("add","#tabs-5","Announcements");
$("#tabs").tabs("add","#tabs-6","Contact");
You made a typo in the tabs you're adding. The id of the divs has to match the second parameter of each function.
Your divs look like this:
<div id="tabs-4">
But your code references:
$("#tabs").tabs("add","#tab-4","Friends Discussions");
^
s is missing
Try this code instead:
http://jsfiddle.net/ugjLs/
$(function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
$( "#tabs" ).tabs("add","#tabs-4","Friends Discussions");
$( "#tabs" ).tabs("add","#tabs-5","Announcements");
$( "#tabs" ).tabs("add","#tabs-6","Contact");
});
Related
Hi I am looking to place content from a child element into another element.
I have a hidden div called "DetailsExpanded" and a series of items called "IconWrapper". On clicking "IconWrapper" I would like to copy the content from that items "ItemDetail" Into "DetailsExpanded" and slide down "DetailsExpanded" with said content
Please see below my html structure.
I have begin on the sliding js but I am a bit out of my depth unfortunately.
$( ".IconWrapper" ).click(function () {
if ( $( ".DetailsExpanded" ).is( ":hidden" ) ) {
$( ".DetailsExpanded" ).slideDown( "fast" );
} else {
$( ".DetailsExpanded" ).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DetailsExpanded"></div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
All you have to do is to take the .html() of the clicked element and to set it in your .DetailsExpanded element :
$(".IconWrapper").on("click", function() {
var content = $(this).find(".ItemDetail").html();
$(".DetailsExpanded").html(content);
$(".DetailsExpanded").slideToggle("fast"); // this replaces slideDown or hide
});
$( ".IconWrapper" ).click(function () {
var text = $(this).find('.ItemDetail').text();
$( ".DetailsExpanded" ).html(text).slideDown( "slow" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DetailsExpanded"></div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy1</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy2</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
<div class="IconWrapper">
<div class="ItemDetail">Content to copy3</div>
<div class="Icon icon-icons-d-steps"></div>
</div>
Is this what you are looking for ?
$(document).ready(function(){
$('.IconWrapper').on('click', function(e) {
$(".DetailsExpanded").text($(this).text()).slideDown();
});
});
This is my .html code
<div class="col-2">
<div class="col-content">
<div class="lt">
<div class="lt-img arch"></div>
</div>
<div class="rt">
<h3>Competitve Prices</h3>
<p>Arch Linux 2012.12 x64</p>
Read more <div class="arrow"></div>
</div>
<div class="clearfix"></div>
<div class="wholebox">
<ul>
<li>Arch Linux 2012.12 x64</li>
<li>Arch Linux 2012.08 x64</li>
<li>Arch Linux 2012.08 x86</li>
</ul>
</div>
</div>
</div>
I have .js file code here ..
$( ".rt a" ).click(function() {
$( ".wholebox" ).slideToggle( "slow" );
return false;
});
Problem : When i click on link it show all div having classwholebox.In .css file i set property to display:none for this wholebox class.How can i show wholebox only for particular link with this hierarchy of HTML code .
$('.rt a').click(function() {
$(this).closest('.col-content').find('.wholebox').slideToggle('slow');
return false;
});
Try sth like following:
$( ".rt a" ).click(function() {
//first look for <div class="col-content"> and find class .wholebox
$(this).parent().parent().find(".wholebox").slideToggle( "slow" );
return false;
});
Give some data-id to your tag and map that id to your "wholebox" class.
Refer below code.
Only need to collect id from <a href="" data-id="1"> and map it to <div class="wholebox**1**">
<div class="col-2">
<div class="col-content">
<div class="lt">
<div class="lt-img arch"></div>
</div>
<div class="rt">
<h3>Competitve Prices</h3>
<p>Arch Linux 2012.12 x64</p>
Read more <div class="arrow"></div>
</div>
<div class="clearfix"></div>
<div class="wholebox1">
<ul>
<li>Arch Linux 2012.12 x64</li>
<li>Arch Linux 2012.08 x64</li>
<li>Arch Linux 2012.08 x86</li>
</ul>
</div>
</div>
</div>
$( ".rt a" ).click(function() {
$( ".wholebox"+($(this).attr("data-id")) ).slideToggle( "slow" );
return false;
});
I started some time studying javascript, and I have some questions and was wondering if you can do this.
I have a div:
<div class="category"> </div>
it automatically repeats everytime I create a new category in a forum system. this is default "so there is no possibility to manually"
So wanted it to be added numbering for each category. thereby:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
and so on, all this through jquery or javascript.
If it is possible what is the way?
jQuery solution:
$( ".category" ).each( function( index ) {
$( this ).addClass( "category"+(index+1) );
});
Result:
<div class="category category1"> </div>
<div class="category category2"> </div>
<div class="category category3"> </div>
<div class="category category4"> </div>
Solution 2:
$( ".category" ).each( function( index ) {
$( this ).removeClass( "category" ).addClass( "category"+(index+1) );
});
Result:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
FIDDLE
HTML
<button id="category-button">Add Category</button>
<div id="category-container"></div>
Javascript
$('#category-button').on('click', function() {
var $container = $('#category-container'),
$elem = $('<div/>', {
"class": "category" + ($container.children().length + 1)
});
$container.append($elem);
});
I try to open a panel with jQuery Mobile.
The panel should come from the left and push the page, but it seems like the panel overlay the whole side.
In the console i get the error:
Uncaught Error: cannot call methods on panel prior to initialization; attempted to call method 'open'
My HTML:
<div data-role="page">
<div data-role="header">
<header>
<div id="header">
Menu
<h1 id="headline">Text</h1>
<div class="clean"></div>
</div>
</header>
</div>
</div>
<footer>
</footer>
<div data-role="panel" id="menue_panel" data-position="left" data-display="push">
<ul class="ui-alt-icon ui-nodisc-icon">
<li>Startseite</li>
<li>Medikamente</li>
</ul>
</div>
My JS
$( document ).ready(function() {
$( "#menu-btn" ).on( "click", function() {
$( "#menue_panel" ).panel( "open" );
});
});
I don't know why it doesnt work.
The panel should be inside the page DIV.
see docs here http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
jQuery(".link").click(function()
{
jQuery("div.content").slideToggle(500);
});;
});
</script>
How to expand only the div which is linked to the specific link?
Edit:
Its done like this
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
<div class="content">
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
</div>
EDIT 2:
You changed your HTML. Now do this:
jQuery(this).closest('div.comment').next('div.content').slideToggle(500);
But wait! Now you have 2 different div.link elements in different relation to .content elements. Is this your actual HTML markup?
You could also do this:
jQuery(this).closest('div.content').slideToggle(500);
Please provide your actual HTML.
EDIT:
Based on updated question, do this:
jQuery(this).parents('div.blaat1').eq(1).next().slideToggle(500);
How to expand only the div which is linked to the specific link?
How are they linked?
If the div is a descendant, do this:
jQuery(this).find('div.content').slideToggle(500);
If the div is a an ancestor, do this:
jQuery(this).closest('div.content').slideToggle(500);
If the div is the next sibling, do this:
jQuery(this).next().slideToggle(500);
If the div is the previous sibling, do this:
jQuery(this).prev().slideToggle(500);
Without seeing your HTML structure, we can only guess at the solution.
For this HTML:
<div class="blaat1">
<div class="blaat1">
<a class="link">#</a>
</div>
<div class="blaat2">
<a class="link">#</a>
</div
</div>
<div class="content">
<div class="otherdivs">
<div class="blaat1_div"><p>Hi – I'm blaat 1</p></div>
<div class="blaat2_div"><p>Hi – I'm blaat 2</p></div>
</div>
</div>
Use this JS:
<script type="text/javascript">
$(document).ready(function() {
$(".content").hide();
$(".link").click(function() {
var blaat = $(this).parent().attr("class");
$(blaat+"_div").slideToggle(500);
});;
});
</script>
I haven't tested that, but it should work.
Try this:
$(".link").click(function(){
$(this).parents('div.content').slideToggle(500);
});;