I have found many examples for different circumstances, but im just not experienced enough to combine them and accomplish the result I want. I am trying to create a TamperMonkey/GreaseMonkey script to highlight a DIV that matches a particular image source.
The website code is as follows, I cannot change it, but I removed the URL for the image and excess code so its easier to read:
<div class="listing_results>
<div class="listing_row" id="listing_1">
<div class="listing_img_container">
<img id="listing_1_image" src="image-source-1.jpg">
</div>
</div>
<div class="listing_row" id="listing_2">
<div class="listing_img_container">
<img id="listing_2_image" src="image-source-2.jpg">
</div>
</div>
<div class="listing_row" id="listing_3">
<div class="listing_img_container">
<img id="listing_3_image" src="image-source-3.jpg">
</div>
</div>
</div>
Im looking for code to search for image-source-#, and change the background color of the listing-row DIV when I find it (for example, search for image-source-2.jpg and change listing_row to green).
$('img[src="image-source-2.jpg"]').parent().css('background-color','red');
div{
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="listing_results>
<div class="listing_row" id="listing_1">
<div class="listing_img_container">
<img id="listing_1_image" src="image-source-1.jpg">
</div>
</div>
<div class="listing_row" id="listing_2">
<div class="listing_img_container">
<img id="listing_2_image" src="image-source-2.jpg">
</div>
</div>
<div class="listing_row" id="listing_3">
<div class="listing_img_container">
<img id="listing_3_image" src="image-source-3.jpg">
</div>
</div>
</div>
Related
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>
I have an image gallery. Basically I am trying to go for something that lets the hovered image maintain its styling properties but the background (non-hovered images, I should say) filter to grayscale.
This is my first project and I am trying to push myself. I am making some mistakes but learning from each one. Your help is appreciated.
HTML:
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="images/martial-arts-banner/boxing.png">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="images/martial-arts-banner/kickboxing.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="images/martial-arts-banner/muaythai.png">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="images/martial-arts-banner/wrestling.png">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>
JQUERY:
$(document).ready(function() {
$(".disciplines img").hover(function(){
var images = $(".disciplines img");
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).next().find('h3').slideToggle();
if (images.not(".active-image") {
$(images).css("filter", blur("20px"));
}
});
You have to do it like below:-
$(document).ready(function() {
$("#image-gallery img").hover(function(){ // on hover of image
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).parent().css({"filter": ""}); //remove it's parent filter css
$('img').not($(this)).parent().css({"filter":'blur(5px)'}); //add filter css to all othe images parent-div apart from thr current clicked-one
}, function () { //when hover-out
$('.disciplines').css({"filter": ""}); //remove filter css from all div
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="https://ae01.alicdn.com/kf/HTB1dizJKFXXXXa_XFXXq6xXFXXXs/Closed-Type-Boxing-Helmet-Head-Protector-For-Taekwondo-Karate-Tai-MMA-Muay-Thai-Kickboxing-Competition-Training.jpg_50x50.jpg">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="http://www.days-gym.com/wp-content/uploads/2015/11/days-gym-website-logo.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="https://i.pinimg.com/favicons/50x/ded1fa7e09a93f576a8dc1060fbf82f7e63076e47a08abd0cf27887f.png?ca1416448b5d5bfb6c7465ba2cb5e0d4">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="https://iawrestle.files.wordpress.com/2017/06/screen-shot-2017-06-14-at-10-35-09-am.png?w=50&h=50&crop=1">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>
I am getting something weird issue with my website. I have add some links to my website home page to another page. Something like this
www.fsfsdafsdafdsafsadf/#pro1
www.fsfsdafsdafdsafsadf/#pro2
www.fsfsdafsdafdsafsadf/#pro3
www.fsfsdafsdafdsafsadf/#pro4
Now when I click on any link it will send me to div pro1 on any of the link I click.. Please check the html also for that page
<!-- section 1 image-->
<div id="pro2" name="pro2">
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Unlimited possibilities </div>
Some text
</div>
<div class="inner-right">
<img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/06/product1.jpg" alt="product image1">
</div>
</div>
</div>
<!-- section 1 no image-->
<div id="pro1" name="pro1">
<div class="inner-image-width">
<div ><div class="titleinner">Boost in revenue </div>
Some text
<!-- section 2 image-->
<div id="p5">
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Improved customer experience </div>
Some text</div>
<div class="inner-right"><img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product4.jpg" alt="product image1"></div>
</div>
</div>
<!-- section 2 no image-->
<div class="inner-image-width">
<div>
<div class="titleinner">Confidence in security </div>
Some text</div>
</div>
<!-- section 3 image-->
<div class="inner-image-width">
<div class="inner-left">
<img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product3.jpg" alt="product image1">
</div>
<div class="inner-right"><div class="titleinner">Happier staff </div>
Some text</div>
</div>
<!-- section 3 no image-->
<div class="inner-image-width">
<div><div class="titleinner">Optimized marketing campaigns </div>
Some text
</div>
</div>
<!-- section 4 image-->
<div id="pro3" name="pro3" onlclick="window.location.hash = '#pro3'";>
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Secure payments </div>
Some text</div>
<div class="inner-right"><img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product6.jpg" alt="product image1"></div>
</div>
</div>
<!-- section 4 no image-->
<div id="pro4" name="pro4">
<div class="inner-image-width">
<div><div class="titleinner">Fun entertainment </div>
Some text</div>
</div>
</div>
<!-- section 5 image-->
<div id="pro6" name="pro6">
<div class="inner-image-width">
<div class="inner-left">
<img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product5.jpg" alt="product image1">
</div>
<div class="inner-right"><div class="titleinner">Reduced operating costs </div>
Some text</div>
</div>
</div>
<!-- section 5 no image-->
<div class="inner-image-width">
<div>
<div class="titleinner">Immediate improvements </div>
Some text</div>
</div>
<!-- section 6 image-->
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Increased brand loyalty </div>
Some text</div>
<div class="inner-right"><img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product2.jpg" alt="product image1"></div>
</div>
<!-- section 6 no image-->
<div class="inner-image-width">
<div><div class="titleinner">Minimal risk </div>
Some text</div>
</div>
<div style="font-size:24px;">Contact us Some text</div>
I try every solution of stackoverflow but nothing work. Can anybody please help me this
You just use this:
Pro 1
Because you are using bookmarks(#hushtag) in your URL.
Check out HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of
a Web page.
Bookmarks are practical if your website has long pages.
To make a bookmark, you must first create the bookmark, and then add a
link to it.
When the link is clicked, the page will scroll to the location with
the bookmark.
In your case,
www.fsfsdafsdafdsafsadf/#pro1 -> click this link will jump to div #pro1
www.fsfsdafsdafdsafsadf/#pro2 -> click this link will jump to div #pro2
www.fsfsdafsdafdsafsadf/#pro3 -> click this link will jump to div #pro3
www.fsfsdafsdafdsafsadf/#pro4 -> click this link will jump to div #pro4
Basically, your URL bookmarks(#hushtag) works fine.
If you want to link to another page, just avoid using hashtag, maybe like this:
www.fsfsdafsdafdsafsadf/pro1.php -> click this will link to 'pro1.php'
like this:
link text
link text
I am trying to get hold of the last child of class full-width. It's a looping text with border-bottom. All I want is that the last child doesn't get the border. To make sure it works in IE8 too, I am doing it through JQuery:-
Somehow it doesn't work.
JQuery
$(".solutions-section .field-items .field-item div:last-child").css("border-bottom","none");
HTML
<div class="full-width info-block solutions-section">
<div class="field field-name-field-solutions-area field-type-text-long field-label-hidden">
<div class="field-items">
<div class="field-item even" style="border-bottom-style: none;"><h2>A Para</h2>
<div class="full-width solid-block">
<div class="alignleft onethird-width ">
<img border="0" src="sites/all/themes/ourbrand/images/image.png" width="120">
</div>
<div class="alignleft qtr-width small-text dark-grey">
Who is it for? All Text</div>
<div class="clear"> </div>
</div>
<div class="full-width solid-block">
<div class="alignleft onethird-width ">
<img border="0" src="sites/all/themes/ourbrand/images/image.png" width="120">
</div>
<div class="alignleft qtr-width small-text dark-grey">
Who is it for? All Text</div>
<div class="clear"> </div>
</div>
</div></div></div></div>
I think ur selection not only select the child div only. It will take all the div contain in item-field class.
just add '>' before div maybe help.
$(".solutions-section .field-items .field-item > div:last").css("border-bottom","none")
example here http://jsfiddle.net/w6s6puLu/
If I get your problem correctly then you can use :
$(".solutions-section .field-items .field-item div.full-width:last-child").css("border", "2px solid green");
Demo
Just see if it helps!
Here This is what I am trying. On Click of each thumbnail I have to display the Larger Image. I need some help so that I can know my issue why the click method is not working fine for me.
Thumbs Part HTML
<div class="ScreenShot" id="__control0" data--ui="__control0">
<div id="thumbs" data--ui="thumbs" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set0" data--ui="__set0" class="UiUx3DS">
<div id="__set0-items">
<div id="__view0" data--ui="__view0" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item0-__set0-0" data--ui="__item0-__set0-0">
<div id="__layout0-0" data--ui="__layout0-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-0" data--ui="__image0-0" src="images/image_01_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-1" data--ui="__item0-__set0-1">
<div id="__layout0-1" data--ui="__layout0-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-1" data--ui="__image0-1" src="images/image_02_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-2" data--ui="__item0-__set0-2">
<div id="__layout0-2" data--ui="__layout0-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-2" data--ui="__image0-2" src="images/image_03_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Larger Images HTML
<div id="panel" data--ui="panel" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set1" data--ui="__set1" class="UiUx3DS">
<div id="__set1-items">
<div id="__view1" data--ui="__view1" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item1-__set1-0" data--ui="__item1-__set1-0">
<div id="__layout1-0" data--ui="__layout1-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-0" data--ui="__image1-0" src="images/image_01_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-1" data--ui="__item1-__set1-1">
<div id="__layout1-1" data--ui="__layout1-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-1" data--ui="__image1-1" src="images/image_02_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-2" data--ui="__item1-__set1-2">
<div id="__layout1-2" data--ui="__layout1-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-2" data--ui="__image1-2" src="images/image_03_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Jquery
$("#thumbs img").click(function(){
$("#thumbs img.clicked").removeClass('clicked');
$("#panel img").hide();
$("#panel img:nth-child("+Number($(this).index()+1)+")").fadeIn();
$(this).addClass('clicked');
});
Here is the demo:
http://jsfiddle.net/L7yKp/5/
On click of each thumbnail the corresponding image should be fadeIn. But here every larger image is fading In.
Here is a simple working demo matching your needs: http://jsfiddle.net/D6XHt/1/
Note: It's not the same html as yours but should you push to the right direction. The technique i'ma using has one disadvantage. Without JS enabled your users will see only on big image.
BUT a real advantage is you will save bandwidth and page loading time if you have many images. This is because every big image will load only if the user clicks a thumbnail.
Here is another working solution with all images in document.
http://jsfiddle.net/D6XHt/2/
If you want to show your Images in a fancy lightbox Popup try
http://fancybox.net/home or
http://www.jacklmoore.com/colorbox