jQuery slider index - javascript

I'm trying to duplicate the text inside the <h1> tag in the .slider-item divs to the anchor tags in the .bx-pager div. For example, the anchor in the first .bx-pager-item should have the text of the h1 in the first .slider-item div. Then the anchor tag in the second .bx-pager-item should have the text of the <h1> in the second .slider-item div. Is there something wrong with my jQuery code that makes it not do what I want?
My jQuery code:
$(window).load(function(){
$("#pagination .bx-pager-item").each(function(){
var whichPos = $(this).index();
var whichSlide = $('.slider-item').index(whichPos).find('h1').text();
$(this).find('a').text(whichSlide);
});
});
The pagination:
<div id="pagination">
<div class="bx-pager-item"></div>
<div class="bx-pager-item"></div>
<div class="bx-pager-item"></div>
</div>
The slider structure is:
<div class="bxslider">
<div class="slider-item">
<h1>Header</h1>
</div>
<div class="slider-item">
<h1>Header 2</h1>
</div>
<div class="slider-item">
<h1>Header 3</h1>
</div>
</div>

Change:
var whichSlide = $('.slider-item').index(whichPos).find('h1').text();
to:
var whichSlide = $('.slider-item').eq(whichPos).find('h1').text();
index does not get the nth element, it returns a number.
CodePen: http://codepen.io/theblindprophet/pen/JKLbXw

Related

Enclose whole div in an <a>

I have a div which I want to surround with an <a href>. I have the jQuery to add the <a href> after the div but I struggle to set it before and close it after the div.
This is the jQuery code I have:
$('.box_service').each(function() {
var link = $(this).html();
$(this).contents().wrap('');
});
It results in this HTML:
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>
However my goal is this structure:
<div class="row">
<a href="example.com">
<div class="box_service">
<div class="inner-row"></div>
</div>
</a>
</div>
I can't enter the div before because there are more boxes in this row so I would add the <a href> to everything in there
The issue is due to your call to contents() which means you're wrapping the elements inside .box_service, not that element itself. Remove that method call.
Also note that each() is redundant, you can do what you require in a single line:
$('.box_service').wrap('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
Box service #1
<div class="inner-row">Inner row #1</div>
</div>
</div>
<div class="row">
<div class="box_service">
Box service #2
<div class="inner-row">Inner row #2</div>
</div>
</div>
.content will wrap the contents of your div, you want to wrap the div with <a> so call wrap on the div not on contents.
$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<div class="inner-row"></div>
</div>
</div>
$('.box_service').each(function() {
var link = $(this).html();
$(this).wrap('');
});
You just need to remove contents() in between $(this).wrap() because contents() mean that you are wrapping the children of $(this).
Remove .contents() in order to wrap around each element with the class box-service:
$('.box_service').each(function() {
$(this).wrap('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="box_service">
<a href="example.com">
<div class="inner-row"></div>
</a>
</div>
</div>
$('.box_service').wrap('');

Get height of div containing image with js offsetHeight

I'm trying to get the height of a div containing a headline and an image. All I get back is the height of the heading. If I add a specific height to the container div I get the correct height (in this case 300px), but I need the different heights. Thx for any help!
My js code:
var tile1 = document.getElementById('t1').offsetHeight;
My HTML:
<div class="t" id="t1" style="height:300px !important;">
<article>
<header class="beitrag">
<div class="beitrag-meta">Date: 2016-11-02 19:59:45</div>
</header>
<div class="beitrag-inhalt"><img src="219594520163877.jpg" ></div>
</article>
</div>
Make sure you run it after the page has been loaded.
Stack snippet
window.addEventListener('load', function() {
var tile1 = document.getElementById('t1').offsetHeight;
console.log(tile1);
})
<div class="t" id="t1">
<article>
<header class="beitrag">
<div class="beitrag-meta">Date: 2016-11-02 19:59:45</div>
</header>
<div class="beitrag-inhalt"><img src="http://placehold.it/100/"></div>
</article>
</div>
Or with a script tag at the bottom of the body
Stack snippet
<div class="t" id="t1">
<article>
<header class="beitrag">
<div class="beitrag-meta">Date: 2016-11-02 19:59:45</div>
</header>
<div class="beitrag-inhalt"><img src="http://placehold.it/100/"></div>
</article>
</div>
<script>
var tile1 = document.getElementById('t1').offsetHeight;
console.log(tile1);
</script>
use jQuery load function
$( document ).ready(function() {
$("img").load(function() {
var tile1 = document.getElementById('t1').clientHeight;
alert("height: "+tile1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t" id="t1">
<article>
<header class="beitrag">
<div class="beitrag-meta">Date: 2016-11-02 19:59:45</div>
</header>
<div class="beitrag-inhalt"><img src="http://placehold.it/300x350" ></div>
</article>
</div>

Set multiple html tags with same structure to height of the next div

I have a webpage that has multiple elements with the same structure:
<img class="rollover" src="http://www.example.com/images/rollover.png"/>
<div class="text">
<h3>Example 1</h3>
</div>
<img class="rollover" src="http://www.example.com/images/rollover.png"/>
<div class="text">
<h1>Example 2</h1>
</div>
I want to set the height of the img tags with class="rollover" to the same height as the next div with class="text". There can be one or more of these appearing on the page. I have some basic jquery that can set the heights equal, but it sets all of the images to the same height. How can I adjust it so that it just takes the next div's height?
$('.rollover').height($('.text').height());
This works if there are always corresponding imgs and text-divs as in your code shown.
var txt = $('.text');
$('.rollover').each(function(i) {$(this).height(txt.eq(i).height());});
try this :
var x = $(".rollover").length;
for(var i=1; i<=x; i++)
{
var h = $(".rollover:nth-child('+i+'").next(".text").height();
$(".rollover:nth-child('+i+').height(h);
}
You may put each pair of img and div inside a new div element. This will improve the readability of the code...
<div class="eaqualHeight">
<img class="rollover" src="http://www.example.com/images/rollover.png"/>
<div class="text">
<h3>Example 1</h3>
</div>
</div>
<div class="eaqualHeight">
<img class="rollover" src="http://www.example.com/images/rollover.png"/>
<div class="text">
<h1>Example 2</h1>
</div>
</div>
And then use following jquery code...
$('.eaqualHeight').each(function(){
$(this).children('.rollover').height($(this).children('.text').height());
});

Show specific content for each div using Fancybox,

I am trying to load a specific sibling for each div using fancybox.
E.g:
<div id ="content">
<div class="item1">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 1</span></div>
</div>
<div class="item2">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 2</span></div>
</div>
<div class="item3">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 3</span></div>
</div>
<div class="item4">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 4</span></div>
</div>
</div>
I tried to do the config using the property Content, but not got it, is it possible to get each hidden for each specific item ?
You can use below code:
$(function(){
$("div.pop-ups span").click(function(){
$.fancybox({ content: $(this).parent().next().html() });
});
});
This will show the content of relevant div in fancybox.
You can call this function to open some specific div content in a fancybox.
function OpenDiv(divIDtoopen) //eg. divIDtoopen= #divID //# is must to be prepended to divID for selection
{
$(document).ready(function ()
{
$.fancybox.open(
{
href: divtoopen
}
);
}
);
}

Javascript - jquery,accordion

<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?
You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();
I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>
Why not use slideToggle() instead of IF statements....
Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});

Categories