How can I access the parent element properties using jQuery? For example the below code is in my site:
<div style="text-align: center;">
<h3>Testing</h3>
<p>
<a style="display: inline-block;" href="http://www.google.com" target="_blank">
<img class="alignleft size-full wp-image-3748" src="/wp-content/uploads/BBB336699.png" alt="BBB" height="45">
</a>
<a style="display: inline-block;" href="http://www.facebook.com" target="_blank">
<img class="alignleft size-full wp-image-3749" src="/wp-content/uploads/COA336699.png" alt="COA" height="45">
</a>
<a style="display: inline-block;" href="http://portal.hud.gov/hudportal/HUD" target="_blank">
<img class="alignleft size-full wp-image-3750" src="/wp-content/uploads/HUD336699.png" alt="HUD" height="45">
</a>
<a style="display: inline-block;" href="http://www.gmail.com/" target="_blank">
<img class="alignleft wp-image-3921" src="/wp-content/uploads/HPF336699.png" alt="HPF" height="45">
</a>
</p>
</div>
$("a").click(function(event){
var key = window.event.toElement;
var re = /speridian/gi;
if (key.href.search(re) == -1) {
alert("it is not");
}
});
When I click the Above Links i am getting an img element event properties but I need the a element event properties like toElement.
Could you anyone please help me out how to get the anchor elements events here. Thanks in advance!
The issue is because you're using the window.event. Use this to reference the clicked element instead:
$("a").click(function(e) {
e.preventDefault(); // stop the page being redirected
var re = /speridian/gi;
if ($(this).prop('href').search(re) == -1) {
alert("it is not");
}
});
Use .parent(SELECTOR), Get the parent(immediate parent) of each element in the current set of matched elements, optionally filtered by a selector.
$('img').on('click', function(e) {
//e.stopPropagation();
console.log($(this).parent('a').prop('href'));
});
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div style="text-align: center;">
<h3>Testing</h3>
<p>
<a style="display: inline-block;" href="http://www.google.com" target="_blank">
<img class="alignleft size-full wp-image-3748" src="/wp-content/uploads/BBB336699.png" alt="BBB" height="45">
</a>
<a style="display: inline-block;" href="http://www.facebook.com" target="_blank">
<img class="alignleft size-full wp-image-3749" src="/wp-content/uploads/COA336699.png" alt="COA" height="45">
</a>
<a style="display: inline-block;" href="http://portal.hud.gov/hudportal/HUD" target="_blank">
<img class="alignleft size-full wp-image-3750" src="/wp-content/uploads/HUD336699.png" alt="HUD" height="45">
</a>
<a style="display: inline-block;" href="http://www.gmail.com/" target="_blank">
<img class="alignleft wp-image-3921" src="/wp-content/uploads/HPF336699.png" alt="HPF" height="45">
</a>
</p>
</div>
Related
I'm attempting to use multiple JS files for my page, but for some reason, whenever I attempt to add a second , the second one does not work, not matter where I position it, and changing ID tags doesn't help either
Here's the HTML code
<div id="buttoncontainer" class="buttoncontainer">
<script src="js/menu.js"></script>
<script src="js/test.js"></script>
<div class="rightmenu">
<div id="test" style="height:400px;width:100px;outline:solid red 1px;">
</div>
And here's the JS files
menu.js
let headerContent = `
<a href="index.html">
<img src="images/buttons/homebutton.gif" class="button"></a>
<a href="blog/blogmain.html">
<img src="images/buttons/blogbutton.gif" class="button"></a>
<a href="art/artmain.html">
<img src="images/buttons/artbutton.gif" class="button"></a>
<div class="dropmenu1">
<a href="art/fanartmain.html">
<img src="images/buttons/fanartbutton.gif" class="button"></a>
<div class="dropmenu1-content">
<a href="links/links.html">
<img src="images/buttons/linksbutton.gif" class="button dropbutton"></a>
</div>
</div>
<div class="dropmenu2">
<a href="art/donate.html">
<img src="images/buttons/donatebutton.gif" class="button"></a>
<div class="dropmenu2-content">
<a href="comissions/comissions.html">
<img src="images/buttons/comissionsbutton.gif" class="button dropbutton"></a>
</div>
</div>
<a href="guestbook/guestbook.html">
<img src="images/buttons/guestbookbutton.gif" class="button"></a>
<div class="dropmenu3">
<a href="art/about.html">
<img src="images/buttons/aboutbutton.gif" class="button"></a>
<div class="dropmenu3-content">
<a href="https://junessai.github.io/Old-JuneSSai.net-Archive/" target="_blank">
<img src="images/buttons/oldsitebutton.gif" class="button dropbutton"></a>
<a href="changelog/changelog.html">
<img src="images/buttons/changelogbutton.gif" class="button dropbutton"></a>
</div>
</div>
`;
document.querySelector('#buttoncontainer').insertAdjacentHTML('beforeend', headerContent);
test.js
let headerContent = `
<img src="images/test.png">
`;
document.querySelector('#test').insertAdjacentHTML('beforeend', headerContent);
If you have multiple JavaScript files, they all share the same global namespace.
Because your global variable headerContent has already been declared in menu.js, test.js cannot share the same global variable name.
You could rename headerContent in one of the files to a different name, such as menuHeaderContent and testHeaderContent, to differentiate the two variables.
Or you could put everything inside of {} so any global variables you create are not within the actual global scope:
{
let headerContent = `
<a href="index.html">
<img src="images/buttons/homebutton.gif" class="button"></a>
<a href="blog/blogmain.html">
<img src="images/buttons/blogbutton.gif" class="button"></a>
<a href="art/artmain.html">
<img src="images/buttons/artbutton.gif" class="button"></a>
<div class="dropmenu1">
<a href="art/fanartmain.html">
<img src="images/buttons/fanartbutton.gif" class="button"></a>
<div class="dropmenu1-content">
<a href="links/links.html">
<img src="images/buttons/linksbutton.gif" class="button dropbutton"></a>
</div>
</div>
<div class="dropmenu2">
<a href="art/donate.html">
<img src="images/buttons/donatebutton.gif" class="button"></a>
<div class="dropmenu2-content">
<a href="comissions/comissions.html">
<img src="images/buttons/comissionsbutton.gif" class="button dropbutton"></a>
</div>
</div>
<a href="guestbook/guestbook.html">
<img src="images/buttons/guestbookbutton.gif" class="button"></a>
<div class="dropmenu3">
<a href="art/about.html">
<img src="images/buttons/aboutbutton.gif" class="button"></a>
<div class="dropmenu3-content">
<a href="https://junessai.github.io/Old-JuneSSai.net-Archive/" target="_blank">
<img src="images/buttons/oldsitebutton.gif" class="button dropbutton"></a>
<a href="changelog/changelog.html">
<img src="images/buttons/changelogbutton.gif" class="button dropbutton"></a>
</div>
</div>
`;
document.querySelector('#buttoncontainer').insertAdjacentHTML('beforeend', headerContent);
}
I'm using the Packery plugin to give my image gallery a more interesting layout on a website I'm building.
Every now and then, I visit the page and some of the images are overlapping each other like so:
But then when I refresh the page, it displays it properly:
I tried specifying a height on the container element but to no avail.
Here is the code I'm using:
CSS:
.packery-grid {
min-height: 500px;
}
.packery-grid-03 {
width: 20%;
}
.packery-grid-06 {
width: 40%;
}
.packery-grid figure {
padding: 15px;
}
jQuery:
$(document).ready(function() {
// visuals
$('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
});
HTML:
<div class="row">
<div class="packery-grid">
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/255-198x127.jpg" alt="Six" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/319-198x127.jpg" alt="Five" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_8204-198x127.jpg" alt="Four" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/157-426x284.jpg" alt="Three" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_4445-426x284.jpg" alt="Two" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/Iceland-198x127.jpg" alt="One" />
</a>
</figure>
</div>
</div>
</div>
</div>
</div>
I think I've found the solution on their support page
Unloaded images can throw off Packery layouts and cause item elements
to overlap. imagesLoaded resolves this issue.
And so I've modified my code like so:
// visuals
var $grid = $('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
// layout Packery after each image loads
// to prevent overlapping images
$grid.imagesLoaded().progress( function() {
$grid.packery();
});
can I hide, jump or delete images not found
in balise
<a href="...">
and
<img src="...">
I already use :
$("img").error(function(){ $(this).hide(); });
images not found are hidden but when i'm in my gallery i can see a white screen.
HERE IS MY GALLERY EXAMPLE
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt=""/>
</a>
How about removing the a:-
$("img").error(function() {
$(this).parent().remove();
});
$("a.fancyboxgallery").fancybox();
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt="" />
</a>
My guess is that the empty space is coming from the empty a tag, so you might want to select the parent instead. So instead of $(this).hide(); try $(this).parent().hide();.
Additionally, by using this method, you might want a more specific selector than just $('img'). So maybe try $('.fancyboxthumbnailsgallery').error(function(){ $(this).parent().hide(); });.
To hide all images, I would check for the the class and handle the hiding differently, like so:
$('img').error(function(){
if($(this).hasClass('fancyboxthumbnailsgallery')){
$(this).parent().hide();
} else {
$(this).hide();
}
});
jQuery().parent()
I have this code:
$('.myClass')[0].src += "somethinghere";
And I also have multiple Div's with myClass.
How can I have the [0] to by relevant to the selected Div?
For example:
$('.myClass')[this].src += "somethinghere";
Here is the js:
$(document).ready(function() {
$(document).on("mouseover",".myClass",function(){
//code here
});
});
The HTML is :
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="" frameborder="0"></iframe>
</div>
</div>
What seems to work everytime is:
$('.myIframeClass')[0].src += "something";
but it will only work for the first iframe and not for the others
You could use the this directly
update: after the updated answer (with the real html) it turns out you need to use the closest method to find the container div and then the .find to locate the actual iframe
$(document).ready(function() {
$(document).on("mouseover", ".myLinkClass", function() {
var iframe = $(this).closest('div').find('iframe').get(0);
iframe.src += 'something%20';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-1" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-2" frameborder="0"></iframe>
</div>
</div>
<div>
<a class="myLinkClass" href="" target="_blank">Hover Here</a>
<div class="box">
<iframe class="myIframeClass" width="260" height="150" src="http://urlecho.appspot.com/echo?body=frame-3" frameborder="0"></iframe>
</div>
</div>
Keep in mind that div elements do not have a src property.
If they are indeed div elements you might want to use the .attr method instead.
$(document).ready(function() {
$(document).on("mouseover",".myClass",function() {
var element = $(this),
currentSrc = $(this).attr('src');
element.attr('src', currentSrc + 'something');
});
});
I need help to render 6 images retrieved from mysql database in mvc razor view. Images 1 and 6 are put in their separate divs called "item". Images 2,3,4 and 5 are all put in one div called "item -item-small" Below is the original rendering:
<div class="owl-photos">
<a href="post.html" class="item-photo">
<img src="images/photos/image-1.jpg" alt="" />image1
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-2.jpg" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-3.jpg" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-4.jpg" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-5.jpg" alt="" />image5
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-6.jpg" alt="" />image6
</a>
</div>
Below is what I want to achieve:
<div class ="owl-photos">
<div class="item">
<a href="post.html" class="item-photo">
<img src="images/photos/image-1.jpg" alt="" />image1
</a>
</div>
<div class="item item-small">
<a href="post.html" class="item-photo">
<img src="images/photos/image-2.jpg" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-3.jpg" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-4.jpg" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-5.jpg" alt="" />image5
</a>
</div>
<div class="item">
<a href="post.html" class="item-photo">
<img src="images/photos/image-6.jpg" alt="" />image6
</a>
</div>
</div>
Any help in using JQuery will be appreciated I do not know how to start this. I can add classes to first element but this is a big challenge
Attempted with the code below:
$(".owl-photos>div:nth-child(1n)").before("<div class="item">");
$(".owl-photos>div:nth-child(1n)").after("</div><div class="item item-small">");
$(".owl-photos>div:nth-child(1n)").after("<div class="item item-small">");
$(".owl-photos>div:nth-child(5n)").after("</div><div class="item ">");
$(".owl-photos>div:nth-child(6n)").after("</div>");
$(function () {
var $result = $('<div class="owl-photos"></div>');
var length = $('.owl-photos a').length;
$('.owl-photos a').each(function (key, item) {
if (key == 0 || key == length - 1) {
var $div = $('<div class="item"></div>').append(item);
$result.append($div);
} else {
var $small = $result.find('.item-small');
console.log($small);
if (!$small.length) {
var $div = $('<div class="item item-small"></div>').append(item);
$result.append($div);
} else {
$small.append(item);
}
}
});
$('.owl-photos').html($result.html());
});
https://jsfiddle.net/atw4gwrr/
You can create elements with JavaScript, append the specific elements to them, then place the new elements into .owl-photos. By appending the <a> elements to the newly made <div>s they are moved from their previous place, that's why you don't see them duplicate.
Below, I get the list of childs, then group them as such:
The .first() child is placed in a <div class="item">, then appended
The :not(:first-child) and :not(:last-child) elements are placed in <div class="item item-small">, then appended
The .last() child is placed in a <div class="item">, then appended
$(function(){
var $photos = $('.owl-photos'),
$childs = $photos.children(),
$itemWrapper = $(document.createElement('div')).attr('class','item'),
$itemSmallWrapper = $(document.createElement('div')).attr('class','item item-small');
$photos.append(
$itemWrapper.clone().append($childs.first()),
$itemSmallWrapper.clone().append($childs.filter(':not(:first-child), :not(:last-child)')),
$itemWrapper.clone().append($childs.last())
);
})
.item { border: 3px solid green }
.item.item-small { border: 3px solid blue }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="owl-photos">
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=1" alt="" />image1
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=2" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=3" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=4" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=5" alt="" />image5
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=6" alt="" />image6
</a>
</div>