I'm using this javascript to make a div with 3 tabs; http://www.barelyfitz.com/projects/tabber/ (maybe it's easier to see the css code there instead of copying it all here?)
Anyway, I want to use a image inside of the tab instead of the H2 heading, which it uses by default. Is that possible?
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1 <img src doesn't work here></h2>
<p>Tab 1 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
Thanks in advance!
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1 <img src="http://slembassyusa.org/downloads/Flag_of_Sri_Lanka.png" width=100 height=20 /></h2>
<p>Tab 1 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
DEMO
You could use a tiny bit of additional js/jQuery code, something in this direction maybe:
$(".tabbernav a").each(function(i){
var $img = $("div.tabbertab:nth-child("+(i+2)+") h2 img")
if($img.length > 0) $(this).html($img);
});
that will grab the image from your h2 tag and place it into the tab instead of the heading text.
Demo
Hope this helps you in the right direction!
Related
I am using jQuery EasyTab to fadein/fadeout contents on hashchange function. I have multiple contents with same class names also there are 2 or 3 class names in one content. So I want to change the ID into Class.
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab'>HTML Markup</li>
<li class='tab'>Required JS</li>
<li class='tab'>Example CSS</li>
</ul>
<div class='panel-container'>
<div id="tab1">
<p>content 1</p>
</div>
<div id="tab2">
<p>content 1</p>
</div>
<div id="tab3">
<p>content 1</p>
</div>
</div>
</div>
<!-- I want to change the panel-container section like this-->
<div class='panel-container'>
<div class="tab1 tab3">
<p>content 1</p>
</div>
<div class="tab2">
<p>content 1</p>
</div>
<div class="tab3 tab1">
<p>content 1</p>
</div>
</div>
In my html page there are few div tags and each of them is having <fieldset> and <legend>. Usually we use href for navigation from 1 page to other page
And I could like to navigate from one div tag to another div tage from using
href. Can any one help me how can I do it.
Clicking on Jump will take you to div#anchor1
Jump
<div id="anchor1">Your content goes here</div>
https://jsfiddle.net/1pwo1gqb/1/
All you have to use id and attach it to the a tag like this
.container{
height: 500px;
padding-top: 20px;
}
.nav{
position: fixed;
}
<div class="nav">
section 1
section 2
section 3
section 4
section 5
section 6
</div>
<div class="container" id="s1">
<h1>Section 1</h1>
</div>
<div class="container" id="s2">
<h1>Section 2</h1>
</div>
<div class="container" id="s3">
<h1>Section 3</h1>
</div>
<div class="container" id="s4">
<h1>Section 4</h1>
</div>
<div class="container" id="s5">
<h1>Section 5</h1>
</div>
<div class="container" id="s6">
<h1>Section 6</h1>
</div>
As #sandeep Nayak have explained,
<div id="div1"> some data Go to div 2 </div>
<div id="div2"> some data Go to div 1 </div>
My objective is to have 4 boxes with the same effect in a grid. 2 at the top 2 at the bottom. With 1 it works fine, when I try to put the other 3 it doesn’t work. Here is jsfiddle
function changeClass() {
if(document.getElementById("block").className == "block")
document.getElementById("block").className += " rotated";
else
document.getElementById("block").className = "block";
}
Here is an example of the working effect.
You cannot have more than one element with same id on page. You can use several IDs or same class for your script.
For your case, you need to wrap cards into element with position relative. Also you have errors in script, but here is working example Fiddle
Basically, you go with wrapper:
<div class="card">
<div class="block" onclick="changeClass(this);">
<div class="front side">
<h2>Box 1</h2>
</div>
<div class="back side">
<p>Box 1 Back Text</p>
</div>
</div>
</div>
Than JS:
function changeClass(el) {
if (el.className == "block") el.className += "rotated";
else el.className = "block";
};
Your HTML will need 3 unuique HTML ID elements like so:
<body>
<div id="container">
<div class="db">
<div id="block" class="block" onclick="changeClass()">
<div class="front side">
<h2>Box 1</h2>
</div>
<div class="back side">
<p>Box 1 Back Text</p>
</div>
</div>
<div id="block1" class="block" onclick="changeClass()">
<div class="front side">
<h2>Box 1</h2>
</div>
<div class="back side">
<p>Box 1 Back Text</p>
</div>
</div>
<div id="block2" class="block" onclick="changeClass()">
<div class="front side">
<h2>Box 1</h2>
</div>
<div class="back side">
<p>Box 1 Back Text</p>
</div>
</div>
</div>
</div>
</body>
Then your JS code will need to be modified to identify which elemet has been clicked.. Something like this
function changeClass(element) {
if(element.className == "block")
element.className += " rotated";
else
element.className = "block";
}
In your HTML onClick event you will pass in this like so
onclick="changeClass(this)"
As you can see the process will be individual to each element.
Updated Fiddle
NOTE : In my example the ID's are not required but i wanted to stress the importance of unique ID's on pages.
sorry for the midunderstanding. I meant index, not value. Sorry.
I am wondering if there is a way to use the value of the shown content ".wbox" of this jsfiddle example to coincide with the hidden value, that when clicked will show the hidden content?
For example, When Cont 1 is clicked, hidden box 1 shows. When Cont2 is clicked, hidden box 2 shows... and so forth.
Here is my fiddle: http://jsfiddle.net/kqbLtn8b/1/
HTML:
<div class="box">
<div class="content one">
<h1>Cont 1</h1>
</div>
<div class="content two">
<h1>Cont 2</h1>
</div>
<div class="content three">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one">one</div>
<div class="hidden-box b-two">two</div>
<div class="hidden-box b-three">three</div>
</div>
jquery:
var boxVal = $('.box').val();
Thanks for any help!
What I am really trying to do is shorten the code from something like this:
$('.one').on('click', function(){
$('.b-one').show()
});
and so forth with the rest
Try this : use index of content div to show hidden-box
$(function(){
$('.content').click(function(){
var index = $(this).index();
$('.hidden-content .hidden-box:eq('+index+')').show();
});
});
And make change in your css, instead of hiding hidden-content div you need to hide hidden-box. So change your
.hidden-content{
display:none;
}
to
.hidden-box{
display:none;
}
Demo
If you want to stick to the current HTML you have, it is going to be cumbersome and dirty since there are 2 ways to handle that scenario.
Translate a string like "Cont 1" into "one", "Cont 2" into "two". It's all well and good till nine but what about 100 -> hundred? Or even thousand?
The other approach is instead of naming your hidden boxes as "b-one", "b-two", you can name them "b-1", "b-2", "b-3". That way you can just detect the clicked element and then wipe of the "Cont " part and then use the remainder of the string to get the hidden part's class.
Both the above cases will still give you a very very dirty code since you have to get the .html() of the clicked element and stip of h1 tags.
So my suggestion would be to follow the below method.
HTML:
<div class="box">
<div class="content one" rel="1">
<h1>Cont 1</h1>
</div>
<div class="content two" rel="2">
<h1>Cont 2</h1>
</div>
<div class="content three" rel="3">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-1">one</div>
<div class="hidden-box b-2">two</div>
<div class="hidden-box b-2">three</div>
</div>
JS:
$('.content').on('click', function(){
var divNum = this.rel;
$('.b-'+divNum).show();
});
I recommend restructuring your HTML in the following way:
<div class="box">
<div class="content" id= "c1">
<h1>Cont 1</h1>
</div>
<div class="content" id= "c2">
<h1>Cont 2</h1>
</div>
<div class="content" id= "c3">
<h1>Cont 3</h1>
</div>
<div class="hidden-content">
<div class="hidden-box" id= "h1">one</div>
<div class="hidden-box" id= "h2">two</div>
<div class="hidden-box" id= "h3">three</div>
then use this as your jquery code:
$('.content').click(function(){
var num = $(this).attr('id').split("c")[1];
$("#h"+num).show();
});
and by the way, change your css too:
.hidden-content{
/* display:none;*/
}
.hidden-box{
width:35px;
height:35px;
border:1px solid black;
display:none;
}
This is another way (although not so reliable, as it would break if you change your classes):
$(function () {
$('.content').on('click', function () {
var className = $(this).attr('class').replace('content', '').trim();
$('.hidden-box').hide();
$('.b-' + className).show();
});
});
.hidden-box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="content one">
<h1>Cont 1</h1>
</div>
<div class="content two">
<h1>Cont 2</h1>
</div>
<div class="content three">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one">one</div>
<div class="hidden-box b-two">two</div>
<div class="hidden-box b-three">three</div>
</div>
UPDATE
Based on #Regent comment which I agree to, this would be a more reliable way because it will work even if you change your markup.
You just need to add a data attribute to your markup that will be used to match elements:
$(function () {
$('.content').on('click', function () {
var sel = $(this).data('rel');
$('.hidden-box').each(function () {
$(this).toggle($(this).data('rel') == sel);
});
});
});
.hidden-box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="box">
<div class="content one" data-rel="1">
<h1>Cont 1</h1>
</div>
<div class="content two" data-rel="2">
<h1>Cont 2</h1>
</div>
<div class="content three" data-rel="3">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one" data-rel="1">one</div>
<div class="hidden-box b-two" data-rel="2">two</div>
<div class="hidden-box b-three" data-rel="3">three</div>
</div>
I'm trying to using the jQuery UI according to slide open some DIVs. I want the links to be located elsewhere and target the specific DIVs dependent on their ID. How would I go about doing this? Any tips to point me in the right direction?
Something sort of like this:
<script>
jQuery().ready(function() {
jQuery("#accordion" ).accordion({
collapsible: true,
active: false,
navigation: true
});
});
</script>
and:
<h3>Section 1</h3>
<h3>Section 2</h3>
<h3>Section 3</h3>
<h3>Section 4</h3>
<div id="accordion">
<div id="1">
<p>content</p>
</div>
<div id="2">
<p>content</p>
</div>
<div id="3">
<p>content</p>
</div>
<div id="4">
<p>content</p>
</div>
</div>
You can use the activate method.
Signature:
.accordion( "activate" , index )
Activate a content part of the Accordion programmatically. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass false to close all (only possible with collapsible:true).
Buy using $(link).click(function(){}), you can select the id of the clicked element and
pass the id in the index of the activate method like:
.accordion( "activate" , "#" + id);
You want something that looks more like this.
<div id="accordion">
<h3>Section 1</h3>
<div id="1">
<p>content</p>
</div>
<h3>Section 2</h3>
<div id="2">
<p>content</p>
</div>
<h3>Section 3</h3>
<div id="3">
<p>content</p>
</div>
<h3>Section 4</h3>
<div id="4">
<p>content</p>
</div>
</div>
You are trying to make an accordion slide up and down when clickig elsewhere on the page? If you are then I would just call the click event of the accordion heading you wish to click.
For example with the following accordion markup:
<a href='' id='activateAccordion' />
<div id="accordion">
<h3>Section 1</h3>
<div id="section1">
<p>content</p>
</div>
<h3>Section 2</h3>
<div id="section2">
<p>content</p>
</div>
</div>
You could make section 1 slide up down when clicking the link 'activateAccordion' like so:
$('#activateAccordion').click(function() {
$('a ##section1').click();
});
Here's a jsfiddle of the solution.
Slightly modified HTML: (notice the class and href attributes):
<h3><a class='acc-link' href="#1">Section 1</a></h3>
<h3><a class='acc-link' href="#2">Section 2</a></h3>
<h3><a class='acc-link' href="#3">Section 3</a></h3>
<h3><a class='acc-link' href="#4">Section 4</a></h3>
<div id="accordion">
<h3 id="1"></h3>
<div>
<p>content</p>
</div>
<h3 id="2"></h3>
<div>
<p>content</p>
</div>
<h3 id="3"></h3>
<div>
<p>content</p>
</div>
<h3 id="4"></h3>
<div>
<p>content</p>
</div>
</div>
JS using the activate method:
jQuery().ready(function() {
var acc = $("#accordion").accordion({
collapsible: true,
active: false,
navigation: true
});
$('.acc-link').click(function () {
acc.accordion("activate", $(this).attr('href'));
});
});
One thing to note: the href attribute argument passed into the activate method is interpreted as a CSS selector, which conveniently (and coincidentally) starts with the # selector, so it "just works" with any valid ID.