Target slides by z-index and assign class - javascript

here is what I am trying to achieve. On this page http://livinginspace.staging.wpengine.com/ there are four sharing buttons. First three work perfectly fine, but the houzz works only for one image. What I am trying to achieve is to dynamicly change the button's href attribute depending on the current slide, so when you press it you are sharing the slide that was on the screen when you pressed the houzz button.
As I noticed, all you need to change inside the href of the button is the image url. Also, the only thing that changes (at least that I've noticed) is the z-index of the li element inside the slider div.
Here are my steps:
//first I am targeting the li with z-index 20
var currLi = $('li').filter(function() {
return $(this).css('z-index') == 20;
});
//then i target the url of the image inside that li
var imgUrl = $(currLi + '>div.slotholder>img').attr('src');
//finally I put the url into the houzz button
$('a.sb_network_button.houzz').attr("href", "http://www.houzz.com/imageClipperUpload?link=http%3A%2F%2Flivinginspace.staging.wpengine.com%2F&source=button&hzid=4036&imageUrl=" + imgUrl + "&title=Product+Title+as+it+will+be+seen+inside+Houzz&ref=http%3A%2F%2Flivinginspace.staging.wpengine.com%2F");
Altogether that is:
jQuery(document).ready(function($) {
var currLi = $('li').filter(function() {
return $(this).css('z-index') == 20;
});
var imgUrl = $(currLi + '>div.slotholder>img').attr('src');
$('a.sb_network_button.houzz').attr("href", "http://www.houzz.com/imageClipperUpload?link=http%3A%2F%2Flivinginspace.staging.wpengine.com%2F&source=button&hzid=4036&imageUrl=" + imgUrl + "&title=Product+Title+as+it+will+be+seen+inside+Houzz&ref=http%3A%2F%2Flivinginspace.staging.wpengine.com%2F");
});
I am pretty new to jquery, and I can't remember all the things I've tried but I have done everything I can and it still doesn't work. Also, I have noticed that when I put the code at the very end of the footer, it doesn't work at all (tried putting alerts, just to test), but when it's in the header or beginning of footer (before all other scripts) the alerts work, but I believe the problem might be that the actual li elements that I am trying to target are not yet created. Please help me with it, I've spent so many hours trying to figure this out.
Thanks a lot

To get the "li" with z-index of 20 you can do this, which will get the image URL inside of that "li":
var imgUrl;
$('li').each(function() {
if($(this).css('zIndex') == 20) {
imgUrl = $(this).find('img').attr('src');
}
});
-------------------------------------EDIT---------------------------------------------
I have made a JSFiddle that successfully gets an image src and then places it has the href on an a tag. See it here
The code is below (including the code above that I already had for finding the imgURL of the image with z-index of 20). Obviously, I am using two buttons in my example, but just for testing that the href is undefined initially, to set the href, then check it again.
$('#btn').click(function() {
//Get image with z-index = 20
$('li').each(function() {
if($(this).css('zIndex') == 20) {
imgUrl = $(this).find('img').attr('src');
}
});
$('.a').attr('href', imgUrl);
});
$('#btn2').click(function() {
alert($('.a').attr('href'));
});

Related

Injecting an image if the image doesn't already exist with jquery

I'm trying to do the following:
Check if a div contains the text "Correct Mistakes" if it does then it should:
Check if the div contains an image and/or an image with a specific URL
If the image exits and/or has a specific URL do nothing.
If the image doesn't exist and/or doesn't have a specific URL then insert it after the h3 header tag
See the code below:
var imgURL = "https://i.imgur.com/umCv9Ck.png"
$('.container .modal .content').each(function() {
if ($(this).find('h3').text() == "Corrected Mistakes") {
if ($(this).find('img').attr('src') != imgURL ) {
console.log($(this).find('img').attr('src'))
$('<img alt="blue tile" src="https://i.imgur.com/umCv9Ck.png">').insertAfter(".container .modal .content h3");
}
}
});
Currently it's inserting the image over over and over, every time I run the code... it shouldn't because on the first run it adds the image so on future runs it should see this and not add it again.
I've tried using :contains, I've tried doing it in one statement as shown below
if ($(this).find('h3').text() == "Corrected Mistakes" && ($(this).find('img').attr('src') != imgURL) {}
But nothing I try seems to be working... it's going to be something simple that I am missing but I can't figure it out.
I think part of that is the way your are using the selectors. You did not post the HTML. You can try what is below and edit accordingly. Do you want to insert a new image element or replace the one that is there or change the src for the one that is there ?
var imgURL = "https://i.imgur.com/umCv9Ck.png";
$('.container.modal.content').each(function() {
if ($(this).find('h3').text() == "Corrected Mistakes" && $(this).find('img').attr('src') !== imgURL) {
$('<img alt="blue tile" src="https://i.imgur.com/umCv9Ck.png">').insertAfter($(this).find('h3'));
}
});

How can i create and add an image to my page on click?

Im adding a small function to my page where when you click a button it adds the corresponding image on the page after a certain class.
I have tried several approaches to this 'basic' problem. i have been working on this problem for two days now with no luck.
After clicking my buttons to get some interaction, I quickly recieve the 'Aw, Snap!' error from google. I know my computer can handle grabbing few images and displaying them on the page.
here is a part of my code thats most likely causing the trouble. Ive tried taking this part out of my code out and it helped. I didnt get the error message anymore, but it obviously stopped performing what i wanted it to.
var elem;
function placeImg(type) {
//creates and sets attributes for an img
elem = document.createElement("img");
elem.setAttribute("src", type+".png");
elem.setAttribute("height", "50");
elem.setAttribute("width", "40");
elem.setAttribute("alt", type +' logo image');
//puts image after the class original, its an input area
//there is only one class tag with the name original
$('#original').after(elem);
}
// when an ids with these names are clicked
$("#arrow, #barber, #gas, #lion, #none").click(function() {
//checks if the current input area has a length of 12 or less
if($('#'+findCurrentEditor()).val().length <=12){
placeImg(this.id); //places the image somewhere
}
});
Id appreciate anyone willing to try and help.
Thanks!
I only help you in creating image with jQuery and add it into a div by clicking a button. The rest, you can figure it out since it just some common logic.
$(".btn").on("click", function() {
var $image = $('<img />').attr({
src: 'https://c7.staticflickr.com/6/5820/30597229222_119e91f7e4_k.jpg',
height: "300",
width: "400"
})
$("div#img-wrapper").html($image);
});
see DEMO

Reloading a DIV's image and class by Javascript on click of separate DIV.

The code I’m working with is too long to post, so I’ve made a fiddle here: http://jsfiddle.net/Emily92/5b72k225/
This code takes a random image and cuts it up into a number of pieces depending on the class that is applied in the div which contains the image.
When the page loads, a random image is selected from the array and the class is applied to it, what I’m trying to do is create a separate div, which when clicked on will reload the div containing the image. The result I’m looking for is for the image to be replaced by a new random image with the class applied to it.
Right now, the only way I can make a new image appear in the div is to reload the entire page, ideally this would be achieved by just having the div reload instead of all the other page elements reloading too.
I haven’t been able to do this so far but have received some help on here on how to reload an image and class on click of a div, lines 980-1018 of the Javascript code in the jsfiddle is the current attempt at achieving this, but solving this problem seems much more complicated as the image is being manipulated by the Javascript code, so perhaps this needs to also be reloaded at the same time as the new randomised image is selected?
This is the current attempt at solving this problem:
$(function() {
var imageArray = [
'http://www.webdesignhot.com/wp-content/uploads/2009/10/CatsVectorImage.jpg',
'http://www.costume-works.com/images/halloween_cat_in_witch_hat.jpg',
'http://onthewight.com/wp-content/2013/04/sooty-ryde.jpg'];
reloadImages(imageArray);
$('#reload').on('click',function(){
$( "#masterdiv img[id^='div']" ).each(function(index){
$(this).removeClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
$(this).fadeOut( "slow", function() {
if(index==0) {
reloadImages(imageArray);
}
$(this).addClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
$(this).fadeIn();
});
});
});
});
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function reloadImages(array){
shuffleArray(array);
for(var i=0;i<3;i++){
// places the first image into all divs
document.getElementById('div'+(i+1)+'id').src=array[0];
}
}
I’ve written more details on the issue in the html section of the jsfiddle. I'd really appreciate any advice in solving this and thank you for any help in advance!
The plugin reads the images' src before page load, takes them and then generates the puzzle. As such, you can not just update the images as they're not there anymore. So you'd have to clear the divs under each difficulty classes (easyDiv,mediumDiv,hardDiv), append a new <img> under each div then calls / reload the plugin. Updated code in : http://jsfiddle.net/5b72k225/6/
Changes I've made:
Separate old reloadImages into initImages and reloadImages. initImages is called in the beginning, while reloadImages is called when reloading.
Created new function makePuzzle by taking out the intialization of the plugin from $(document).ready() block, so makePuzzle can be called after reloading new image.
The new $(document).ready() block now initializes the images and attaches click event handler to the button. When clicked, divs are emptied, new <img>s inserted and plugin is called.

Iframe nomenucontext - Modify img tag after creation

Hi I am adding a iframe dynamically, It displays an image from a server. I need to disable the context menu for this item. In chrome I can inspect element and if I add oncontextmenu="return false" I do get the wanted affect. However I am unable to do this while the page is generated. Here is an example of the working html.
However I can not reproduce this when i frame is being created. Here is my code.
$(window).scrollTop(0);
$('#secVerify').show();
$("#popWaitLoad").modal("hide");
imgLoading.hide();
dvIframe.empty();
//else load deposit data into interface
$("#spanType").text(deposit.DepositType);
$("#spanReference").text(deposit.Reference);
$("#spanAmount").text("R " + deposit.Amount.toFixed(2));
$("#spanDate").text(deposit.DateCreatedOffsetS);
imageID = deposit.Deposit_Doc_imageID;
var url = imageUrl + '/' + deposit.Deposit_Doc_imageID + '/false';
var imgFrame = document.createElement("iframe");
imgFrame.src = url;
imgFrame.frameBorder = '0';
imgFrame.scrolling = 'no';
imgFrame.width = '100%';
imgFrame.height = '100%';
imgFrame.align = 'middle';
imgFrame.id = "iframeImg";
dvIframe.append(imgFrame);
I have tried examples like.
$("#iframeImage").contents().find("img").attr("oncontextmenu", 'return false');
$('#iframeImage img').on('contextmenu', function (e) {
e.stopPropagation();
// Your code.
return false;
});
But because the img element seems to be only created is done after page load it seems to not work. I know disabling the the menu will not help much and I have explained all the other methods of obtaining the image that is still available but the client really wants this.
I have added nocontextmenu to the body tag and it works everywhere except for the iframe.
So let me clarify, My iframe is working like it should however I would like to disable the right click aka context menu on the specific iframe.
I have used setAttribute to set the attributes and targeted a container to appendChild.
function example(){
var target = document.getElementById('container');
var element = document.createElement('img');
element.setAttribute('src', 'http://gopalshenoy.files.wordpress.com/2011/04/product_demos.jpg');
//element.setAttribute('width','100%');
//element.setAttribute('height','100%');
element.setAttribute('id','iframeImage');
element.setAttribute("oncontextmenu","return false;");
target.appendChild(element);
}
// Demo-Snippet use.
window.onload=example;
<!-- Demo Snippet use -->
<div id="container"></div>
If you build more than one element using this function you might find further issues due to duplicated ID's.
ID's are used to target a specific element 'one of' so if you want to build multiple elements I would recommend giving them unique ID's.
I hope this helps. Happy coding!

Change image source on mouseover then get the image back on mouseout

<img src="img/image1.png" id="mainimage">
<p>Dog</p>
<p>Cat</p>
I am trying to use JavaScript/jQuery so that whenever a user places their mouse over any of the links with the id's pet1 & pet2 it will change the image src of the image with the id of mainimage.
var img = document.getElementById('swap');
document.getElementById('pet1').onmouseover = function(){
// manipulate the image source here.
img.src = img.src.replace(/\.jpg/, '-on.jpg');
}
The above JavaScript is a script I found here that seems to have the functionality I am looking for. The only problem is that whenever my mouse is over the link it does not display the image I want. Ok, the question I am looking for is how can I make the image with the source (img/pet1.jpg) appear?
Any help will be appreciated!
Try this more simply
$(function() {
$("#pet1")
.mouseover(function() {
var src = 'first image path';
$("#mainimage").attr("src", src);
})
.mouseout(function() {
var src2 ='Default image path';
$(this).attr("src", src2;
});
});
Similllar for second image and for shortening even this you can give a class to every link you want and then by using $(element).each() function and "data" attribute of html5 you can manage it in more cool way
This should get you started.
For all links at once we set a mouseover handler (which takes the ID of the link, turns it into a path to the image, and displays it) and a mouseout handler (which reverts the image's src to its original image).
$(document).ready(function() {
// To start with, get a reference to the image and its original src
var $mainImage = $('#mainimage'),
originalImageSrc = $mainImage.attr('src');
// Then add mouseover and mouseout handlers to all the links
$('a')
.on('mouseover', function() {
var newImageSrc = 'img/' + $(this).attr('id') + '.jpg';
$mainImage.attr('src', newImageSrc);
})
.on('mouseout', function() {
$mainImage.attr('src', originalImageSrc);
});
});
You can see it working in this JSFiddle. So that you can see it working in the JSFiddle without real images, I've used a div's text rather than an img's src, but that's just for the demo.
Of course you could always adapt it (maybe you want to be more specific than all a tags, and maybe you don't always want to use the format img/<id>.jpg – in which case you could add a data-img-src attribute to all your links and use .data('imgSrc') instead of the .attr('id')).
Hopefully this is what you're looking for.
HTML:
<img src="http://placehold.it/300x150" id="theImage">
<p>Red</p>
<p>Blue</p>
JS:
$('.yourClass').hover(function() {
var newImg = $(this).data('img');
$('#theImage').attr('src',newImg)
}, function() {
$('#theImage').attr('src','http://placehold.it/300x150')
});
JSFiddle

Categories

Resources