I have an image link that I want to turn into image and text link.
Having this:
<a href="http://example.com/" class="link">
<img src="http://i.imgur.com/s3zp1u2.jpg" /></a>
I want to get this (notice 'Cat' text):
<a href="http://example.com/" class="link">
<img src="http://i.imgur.com/s3zp1u2.jpg" />Cat</a>
My code adds the text but removes the image:
$(function(){
$('.link').text('Cat');
});
Simplest would be to add an extra span
<a href="http://example.com/" class="link">
<img src="http://i.imgur.com/s3zp1u2.jpg" />
<span></span>
</a>
js
$(function(){
$('.link span').text('Cat');
});
AN alternative is to use append()
Use append instead of text.
$(function(){
$('.link').append('Cat');
});
http://jsfiddle.net/0g8yuq0o/1/
One way:
$(function(){
$('.link').append('Cat');
});
To what have already been suggested, I can only add a pure Javascript solution:
<a href="http://example.com/" class="link">
<img src="http://i.imgur.com/s3zp1u2.jpg" />
<span id="cat-001-text">Cat</span>
</a>
<script type="text/javascript">
document.getElementById("cat-001-text").innerHTML = "dog";
</script>
Related
I'm doing some CSS and I'm not great with JavaScript. However I'm not allowed to edit any of the plugin files, so I thought I could use some JavaScript to solve my issue of missing unique classes.
I just want to take the alt="" HTML attribute from an image and apply it as class="" HTML attribute to its parent <a> element.
So instead of:
<div class="wrapper-class">
<a class="img-parent">
<img alt="image 1" src="">
</a>
<a class="img-parent">
<img alt="image 2" src="">
</a>
<a class="img-parent">
<img alt="image 3" src="">
</a>
</div>
I need:
<div class="wrapper-class">
<a class="img-parent image-1">
<img alt="image 1" src="">
</a>
<a class="img-parent image-2">
<img alt="image 2" src="">
</a>
<a class="img-parent image-3">
<img alt="image 3" src="">
</a>
</div>
Here's the pseudocode I would like to do:
(1) $ Function = ('**.wrapper-class**')
(2) IF (**this**) contains **img**
(3) GET image **alt value**
(4) if (this) contains ('**a**')
(6) Replace **alt** value empty space with - and apply **alt** value to **a** element as class
(7) else = do nothing
How can I do something like this?
Seems like a simple each would do it, assuming all .img-parents have the img in question as their only child:
$('.img-parent').each(function() {
this.classList.add(this.children[0].alt.replace(/ /g, '-'));
});
console.log(document.body.innerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-class">
<a class="img-parent">
<img alt="image 1" src="">
</a>
<a class="img-parent">
<img alt="image 2" src="">
</a>
<a class="img-parent">
<img alt="image 3" src="">
</a>
</div>
(Also, it's called "psuedocode")
First, let me say that it's not a very good idea to use alt attribute value and use it as class name. Assuming the alt attribute gets generated from filename, the filename permits characters which are illegal to use as CSS class names.
I.e.: picture+label.jpg and picture.with.label.jpg are perfectly valid filenames. Let's say the gallery strips the file extension at least, you get picture+label and picture.with.label as alt attributes both of which cannot be used as class names because dot and plus sign have special meanings in CSS selectors.
So to be safe, you might want to do some escaping of the value before using it as class name.
I suggest:
(function addClasses() {
$('.wrapper-class img').each(function (i, image) {
var imageElem = $(image);
var altValue = imageElem.attr("alt"); // Use .attr, not .prop as alt is always a string.
if (!altValue)
return; // either skip to next if image has no alt value or use some default value
// Replace invalid characters here, i.e. using Regular expression
altValue = altValue.replace(/[^a-z0-9\-_]/gi, "_");
// .closest() allows the image to be wrapped in another element/s beside the link
imageElem.closest("a.img-parent").addClass(altValue);
});
})();
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="wrapper-class">
<a class="img-parent"><img alt="image-1"></a>
<a class="img-parent"><img alt="image-2"></a>
<a class="img-parent"><img alt="image-3"></a>
</div>
This should find images and add alt attribute to <a> parent's class
$('.wrapper-class img').each(function(){
$(this).parent('a').addClass($(this).prop('alt').replace(/\s/g,'-'));
//$(this).parent('a').addClass($(this).prop('alt'));
});
console.log($('.wrapper-class').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-class">
<a class="img-parent">
<img alt="im a flower" src="">
</a>
<a class="img-parent">
<img alt="image-2" src="">
</a>
<a class="img-parent">
<img alt="image-3" src="">
</a>
</div>
I'm trying to add data-title and data-lightbox and get Images alt inside.
the problem is, i have a similar outputs, from first image alt only!
How can we fix it?
jQuery(document).ready(function($) {
var imagesalt = $('.box a img').attr('alt');
$(".box a").attr("data-title", imagesalt);
$(".box a").attr("data-lightbox", imagesalt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a data-lightbox="text 1" data-title="text 1" href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a data-lightbox="text 1" data-lightbox="text 1" href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>
I tried writing the code more than one way, but not useful
Thanks
Your query is ambiguous, that's why!
When you request the "alt" attribute with $(".box a img").attr("alt"), you're taking in many objects, sure, but attr() is returning only the first result.
In pure jQuery, you'd do it with .each():
$(".box a img").each(function(){
var imageAlt = $(this).attr("alt");
var parent = $(this).parent();
parent.attr("data-lightbox", imageAlt);
parent.attr("data-title", imageAlt);
});
That should give you the behaviour you expect.
Iterate over each of the divs with the class of 'box' - then find the image within it, get the alt text of that and apply it as the data attribute of the div. Note I put in a console.log to demonstrate the alt text is being found correctly. Ypu can use the console inspector to see that the data attribute is being applied to the divs correctly.
$(document).ready(function(){
$(".box").each(function(){
var imageAlt = $(this).find('img').attr('alt');
$(this).attr("data-title", imageAlt);
console.log(imageAlt);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>
Try this:
$('.box a img').each(function(){
$(this).parent().find("a").attr("data-title", $(this).attr("alt");
$(this).parent().find("a").attr("data-lightbox", $(this).attr("alt");
})
The .attr() method gets the attribute value for only the first element in the matched set.
But, the .attr() method sets the attribute value for every element in the matched set.
enter link description here
I'm trying to hide language_arrow_bottom after clicking and show language_arrow_up and afterwards the other way around.
I cannot find the error in my code below? I know toggle in jquery but I don't want to use it for now.
Thanks in advance
I'm loading http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
HTML
<a id="language_arrow_bottom" href="#nogo" title="Other languages"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
<a id="language_arrow_up" href="#nogo" title="Close" style="display:none;"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
JS
$(document).ready(function ()
{
$('#language_arrow_bottom').click(function(event)
{
$('#language_arrow_bottom').hide();
$('#language_arrow_up').show();
});
$('#language_arrow_up').click(function(event)
{
$('#language_arrow_up').hide();
$('#language_arrow_bottom').show();
});
});
You need to hide the language_arrow_up element by default, not the image inside it
<a id="language_arrow_up" href="#nogo" title="Close" style="display:none;"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
Demo: Fiddle
I don't know but I think you probably need to add return false; calls at the end of your functions. Other code looks good
Check this Fiddle
Just make a with the id and do the same procedure you tried with the tag
<div id="language_arrow_bottom">
<img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" />
</div>
<div id="language_arrow_up" style="display:none;">
<img src="web/images/up_arrow.jpg" width="13px" height="13px" alt=""/>
</div>
Agree with Arun above.
Also, this code may be working, but you are using the same image, "web/images/bottom_arrow.jpg", so visually it may look like it's not working. Try using separate content within the tag (or view the web inspector) to validate whether the code is working or not.
Another fiddle:
http://jsfiddle.net/8A8LS/1/
<a id="language_arrow_bottom"><img src="http://www.iconshock.com/img_jpg/REALVISTA/3d_graphics/jpg/128/arrow_icon.jpg" width="13px" height="13px" alt="" /></a>
<a id="language_arrow_up"><img src="http://petacross.com/images/bwd_arrow.gif" width="13px" height="13px" alt="" style="display:none;" /></a>
$('a').click(function () {
$('a img').show();
$(this).find('img').hide();
});
Change the code to set display "None" for "a" instead of the img as the image is inside the a tag and you are showing and hiding based on the "a" id.
<a id="language_arrow_bottom" href="#nogo" title="Other languages">
<img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt=""/>
<a id="language_arrow_up" href="#nogo" title="Close" `style="display:none;"`>
<img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" />
The same js code will work here after the above changes.
$(document).ready(function ()
{
$('#language_arrow_bottom').click(function(event)
{
$('#language_arrow_bottom').hide();
$('#language_arrow_up').show();
});
$('#language_arrow_up').click(function(event)
{
$('#language_arrow_up').hide();
$('#language_arrow_bottom').show();
});
});
This is because you have hide the image on load...you should use display none in 'a' tag not in 'img'
Here in, I have nested divs..in which images generate dynamically ...this is the html code ..my problem is if i click the print button the corresponding image need to be printed.
<div id="outputTemp" style="display:none">
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="
<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage">
<img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit">
<a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit">
</a></li>
<li id="outdelete"><a href="#" onclick="deleteImg(div11)">
<img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></a></li>
<li id="outfullscreen">
<a href="#">
<img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen"
title="Full Screen"></a></li>
<li id="outshare">
<img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<a href="#" class="menu_top" id="email">
<img src="jqe13/image/email.PNG" alt="Email" title="Email"></a>
<a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG"
alt="Facebook" title="Facebook"></a>
<a href="#" id="twitter">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
<a href="#" class="menu_bottom" id="save">
<img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
</div>
</div>
</li>
<li id="outprint"><a href="#">
<img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></a>
</li>
</ul>
</div>
i need to print the image when i click the print button..
and also i need to print all the images by clicking all button which i need to
create later..
Javascript
$('.printMe').click(function() {
window.print();
return false;
});
does this work for me..can anyone help me with this..
You have to open new window and load only picture there. after that you trigger window.print in it.
If that is the way you are going, I would create simple page that will simplify it
Name it printImage.html, and use something like the following markup
<html>
<script>
function onload() {
var url = window.location.search.substring(1)
var img = document.getElementById('img')
img.src = url
window.print()
}
</script>
<body onload="onload()">
<img href="" id='img' />
</body>
</html>
having that you'll be able to new window for image like printImage.html?myfullpathtotheeimage.jpg
Actually 2nd option offered by #kennypu is quite simple to implement
add the following stylesheet to your page
#media print {
* { display:none; }
.print { display:block }
}
then just toggle print class to the element you are going to print.
If you want to print only the corresponding image, you have two choices.
When the button is clicked, go to a different page which contains only the image to be printed, and run window.print() there.
make a print style sheet using the media query: #media print and hide everything but the image to be printed in the stylesheet
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Replace Div with another Div
Hi,
I have got 2 navigation menus, what I want to do when a client click on a link of first menu , the div id="img" should be replaced by div id="img2" , similarly when i click on the link of menu 2 div id="img2" should be replaced by div id="img" . Any ideas or suggestions ..
Something like this might help you:
//Using jQuery Change div attribute "id" on click:
$('#link_1_id').click(function(){
$('#img').attr('id','img2');
});
Edit: Oops didnt understand the question. To replace a div with another when clicking a link element:
HTML:
Press me
Press me
<div id="div_1"> Content1 </div>
<div id="div_2"> Content2 </div>
Jquery:
$(document).ready(function(){
// Hide div 2 by default
$('#div_2').hide();
$('#link_2').click(function(){
$('#div_1').hide();
$('#div_2').show();
});
$('#link_1').click(function(){
$('#div_2').hide();
$('#div_1').show();
});
});
To add sliding effects take a look at .slideDown() or slideUp().
http://api.jquery.com/slideDown/
Try this:
document.getElementById("img").innerHTML = document.getElementById("img2").innerHTML;
in html
Menu 1
Menu 2
<div id="img">
//--- div content
</div>
<div id="img2">
//--- div content
</div>
in js:
function changeDiv(i){
if(i==1)
document.getElementById("img").innerHTML = document.getElementById("img2").innerHTML;
else
document.getElementById("img2").innerHTML = document.getElementById("img").innerHTML;
}
Try this:
HTML:
<a class="link_1" href="#">Link 1</a>
<a class="link_2" href="#">Link 2</a>
<div class="main" style="width:170px;height:170px;border:1px solid #000;overflow:hidden;padding:10px;position:relative;left:0;top:50px">
<div class="wrapper" style="width:350px;position:absolute">
<img src="image/Example.jpg" class="image_1 image" style="margin:10px;display:inline;height:150px; width:150px"/>
<img src="image/pr_4.jpg" class="image_2 image" style="margin:10px;display:inline;height:150px; width:150px"/>
</div>
</div>
JQUERY:
$('.link_1').click(function(){
$('.wrapper').animate({'left':'-170px'},'linear');
});
$('.link_2').click(function(){
$('.wrapper').animate({'left':'10px'},'linear');
});