Getting an attribute value from the element above the selected element html - javascript

Actually I want to get the attribute value from the closest element. I am unable to get attribute value from my desired element. This is what I have done so far.
I have searched a lot and hardly came up with anything useful. Any help would be greatly appreciated.
<div class="col-sm-4">
<div class="grid mask">
<figure>
<div>
<h4>Hello There</h4>
<span data-id="1"></span>
</div>
<img class="img-responsive" src="../dist/img/team/subhan.png" alt="">
<figcaption>
<a data-toggle="modal" href="#myModal" onclick="alert($(this).closest('span').attr('data-id').html())">Find</a>
</figcaption>
</figure>
</div>
</div>

Use more specific DOM traversal functions. Also, you shouldn't use .html(); .attr() returns the value of the attribute as a string, not an element that you need to extract the contents of.
$("a").click(function() {
alert($(this).closest('figure').find('span[data-id]').data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="grid mask">
<figure>
<div>
<h4>Hello There</h4>
<span data-id="1"></span>
</div>
<img class="img-responsive" src="../dist/img/team/subhan.png" alt="">
<figcaption>
<a data-toggle="modal" href="#myModal">Find</a>
</figcaption>
</figure>
</div>
</div>

Related

I can assign external links to some different ids (modal) in my page?

I can't write a unique javascript that can assign ids to be accessed and displayed by direct links.
On the page I have this gallery of images and captions:
<div class="modal-item">
<a onclick="document.getElementById('id001').style.display='block'" class="item-link">
<img class="thumb" src="image001"/>
</div>
<div id="id001" class="modal">
<div class="modal-content">
<img alt="" src="image001big"/>
</div>
<caption></caption>
</div>
</div>
</div>
<div class="modal-item">
<a onclick="document.getElementById('id002').style.display='block'" class="item-link">
<img class="thumb" src="image001"/>
</div>
<div id="id002" class="modal">
<div class="modal-content">
<img alt="" src="image002big"/>
</div>
<caption></caption>
</div>
</div>
</div>
...
But after all my research I only got as far as this and it doesn't work. Also I shouldn't need to despecify the id every time otherwise I fill the page with scripts.
<script type='text/javascript'>
$(document).ready(function() {
if(window.location.href.indexOf('#id0743') != -1) {
$('#id0743').modal('show');document.getElementById('id0743').style.display='block';
}
});
</script>
There is a much easier way to do this. The window already has a built-in object called window.location.hash, which will return #id001 if you go to https://example.net/#id001 Here is MDN's documentation about it.
Location: hash
The hash property of the Location interface returns a USVString
containing a '#' followed by the fragment identifier of the URL — the
ID on the page that the URL is trying to target.
The fragment is not percent-decoded. If the URL does not have a
fragment identifier, this property contains an empty string, "".
Here is a working version
Note that I'm manually assigning the ID, but that is alone because I can't get the actual hash from the window.
$(document).ready(function() {
let id = window.location.hash;
id = "#id002";
$(id).css('display', 'block');
});
// Pure JS example
window.addEventListener('load', (event) => {
let id = window.location.hash.substring(1);
id = "id001"
document.getElementById(id).style.display='block';
});
.modal {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-item">
<a onclick="document.getElementById('id001').style.display='block'" class="item-link">
<img class="thumb" src="https://www.fillmurray.com/200/200" />
</a>
</div>
<div id="id001" class="modal">
<div class="modal-content">
<img alt="" src="https://www.fillmurray.com/2000/2000" />
</div>
<caption></caption>
</div>
<div class="modal-item">
<a onclick="document.getElementById('id002').style.display='block'" class="item-link">
<img class="thumb" src="https://www.fillmurray.com/199/199" />
</a>
</div>
<div id="id002" class="modal">
<div class="modal-content">
<img alt="" src="https://www.fillmurray.com/1999/1999" />
</div>
<caption></caption>
</div>

jquery, change order of append tags

i have below code :
<div id="test">
<img src="#">
</div>
I append span to this div tag:
$('div#test').append('<span>123123</span>');
this result :
<div id="test">
<img src="#">
<span>123123<span>
</div>
but I want get span first , like this :
<div id="test">
<span>123123<span>
<img src="#">
</div>
Thanks for your help
You can use $.prepend()
$('div#test').prepend('<span>123123</span>');
You can use prepend(); to change the order.
.before() is easier to remember. Then there's its counterpart .insertBefore(). And then there's the previously mentioned .prepend() and its opposite .prependTo().
Plain JavaScript has .before(), .prepend(), .insertBefore(), and my favorite .insertAdjacentHTML(). .insertAdjacentHTML() is like .innerHTML that can insert htmlString at 4 different positions in relation to an element.
Signature:
DOMObject.insertAdjacentHTML(Position,htmlString)
Position:
"beforebegin" <div> "afterbegin" ... "beforeend" </div>"afterend"
$('#test1 img').before('<span>123123</span>');
$('<span>123123</span>').insertBefore('#test2 img');
$('#test3').prepend('<span>123123</span>');
$('<span>123123</span>').prependTo('#test4');
document.querySelector('#test5 img').before(document.createElement('SPAN').textContent = '123123');
var span = document.createElement('SPAN');
span.textContent = '123123';
document.querySelector('#test6').insertBefore(span, document.querySelector('#test6 img'));
document.querySelector('#test7').prepend(document.createElement('SPAN').textContent = '123123');
document.querySelector('#test8').insertAdjacentHTML('afterbegin', '<span>123123</span>');
<div id="test1">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test2">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test3">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test4">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test5">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test6">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test7">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<div id="test8">
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png" width='50'>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Creating a scrolling page without a plug-in. No scroll effect

I'm trying to create a one page scrolling site without using a plugin. Following this tutorial https://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2
The links work but there is no scrolling effect, it just jumps to the section.
JS
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
HTML (updated to remove errors)
<div id="container">
<div class="banner">
<a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>
</div>
<div id="page1">
<a id="welcome"></a>
<h1></h1>
<div id="welcome_squares">
<div class="quarter-column">
<h3></h3>
<p></p>
</div>
<div class="quarter-column">
<a href="#info">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#events">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#contact">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="full-column" id="tiles">
<a id="info"></a>
//CONTENT
</div>
<div class="full-column" id="tiles">
<a id="events"></a>
//CONTENT
</div>
<div id="contact">
<a id="contact"></a>
</div>
</div>
Hey here's the Fiddle which is working.
https://jsfiddle.net/fj1dfcsr/2/
Errors I've encountered.
<div id="container">
<div class="banner">
<a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>
</div>
<div id="page1">
<a id="welcome" href="#"></a>
<h1></h1>
<div id="welcome_squares">
<div class="quarter-column">
<h3></h3>
<p></p>
</div>
<div class="quarter-column">
<a href="#info">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#events">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#contact">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="full-column" id="tiles">
<a id="info" href="#">INfo</a> //Here, you have used </div> instead of </a>
</div>
<div class="full-column" id="tiles">
<a id="events" href="#"></a> //Here also, you have used </div> instead of </a>
</div>
<div id="contact">
</div>
</div>
Few things you should keep in mind that you are calling a particular div whose id you know.
For example
<div id="home"></div>
then you'll have to use Home
not <a id="#home"> Home </a> //Wrong way
There are a lot of mistakes in the code you presented,so it's hard to tell what your original problem was. Here's a working fiddle based on your example.
https://jsfiddle.net/1dqhqpet/1/
I used the id attribute on anchors you place in the document to identify the location of a field you want to "go to". I also didn't put the content inside the anchor tags, because that is not how you do that normally. The anchor tag is a marker. But I don't see why that would be too much of a problem (although with the href on the anchor tag that would turn the whole text into a link). As you can see, since I didn't have access to your images I put some filler content in so you can see it scroll, but again, that shouldn't really affect anything.
It's likely your problem is not in the code you presented.
Some further notes on your code:
I know it was copy pasted, but you have an extra </div> after each //Content comment which makes it not working HTML
Your anchors that are used to identify the location of portions of the document don't need href attributes either. All they need is id. So
<a id="welcome" href="#"></a>
in your example becomes
<a id="welcome"></a>
Note that the content shouldn't go in the anchor tag either. It should go under it. The anchor is just like a bookmark to identify a portion of the page.
Based on how this works, the JQuery is only there to provide "smooth" scrolling. It works just fine without it.

Fancybox looping through multiple albums

I found this question unanswered in Google Groups and I'm facing the same bug in Fancybox.
I have more image galleries on one page. When I go to the next image
with the next prev buttons, and so on, I'll get to the images from the
other gallery.
With lightbox it's possible to do something like:
<a href="url" rel="fancybox[gallery1]" >link</a>
and I'll get all the images from
gallery1 in an image gallery. My albums are dynamic so I can't do it
in my javascript file.
Is this possible?
How would we control this navigation?
<div class="Album" />
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery0">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo1"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo2"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery1">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo1"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo2"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
This is the code I have where every album holds a number of images. When i hit the last image of the first album and navigate next I get to the first pic of the second album. But I want to cycle back to the first image of the same abum
The code you pasted contains a lot of errors...
You have multiple div's with the same id, and the attributes aren't contained within the quotes, in both <div class="AlbumImg"> there are a unmatched closing tag </a>. I'm not so sure that any of this matters for your example but you should definitely look in to it. And as Ruben said fancybox should work with the rel attribute as well, just like lightbox.
Your code should look something like this:
<div class="albums">
<div class="gallery1">
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
<div class="gallery2">
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
</div>
And if you want your galleries to cycle you have to pass a parameter to fancybox. See the documentation. Should look like this:
$(document).ready(function() {
$('a').fancybox({
'cyclic':true
});
});
<a class="grouped_elements" rel="gallery-x" href="Tokyo3.jpg">
this should work? don't forget the '-'
if it doenst work, can you provide the jquery code?

image load event randomly firing in IE7/8

Situation:
I am resizing / preloading images with javascript before showing them on the page.
Problem:
ie7 / 8 tend to randomy fire the load event for some images and not for others (this is completely random and different on every refresh)
Code:
JS:
$(document).ready(function(){
$(".daImg").hide();
$("figure").each(function(){
$(this).append('<div class="loader"><img src="images/ajax-loader.gif"></div>');
var afb = $(this).find(".daImg");
afb.load(function(){
console.log("loaded");
$(this).parent().parent().parent().find(".loader").remove();
if($(this).parent().parent().parent().is(".last")){
if(afb.height() > 280){
var w = (afb.width()/afb.height())*280
afb.css("width",w);
afb.css("height","280px");
}
} else {
if(afb.height() > 245){
var w = (afb.width()/afb.height())*245
afb.css("width",w);
afb.css("height","245");
}
}
afb.css("left","50%");
afb.css("margin-left","-"+afb.width()/2+"px");
afb.fadeIn();
})
});
}
HTML
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
If anyone could shed some light of what is going on here, I'd appreciate it!
Note: This issue has nothing to do with caching as I am adding time-stamps to all images in my actual code.
you may try a different approach in your case
use css
.daImg {
display:none;
}
then hook your image resizing script on $(window).load();
and manipulate all images :not(:visible) at once
you could also duplicate this for the rest browsers to the img.load event but for images that are not already visible. i mean your selector to be var afb = $(this).find(".daImg:not(:visible)");
in this case IE all images that are not processed by the other event will get processed there

Categories