Using jQuery to detect if element has a certain style attribute - javascript

I'm writing a script to detect whether or not an image is present on a webpage. It's a standard formatting with their html for this section. If there is not an image it looks like
<div id="photo" style="display: none;">
<img id="image" src="IMAGESOURCE" onerror="img2txt()" alt="">
</div>
if there is an image present that same html looks like this
<div id="photo">
<img id="image" src="IMAGESOURCE" onerror="img2txt()" alt="">
</div>
Right now in the script I'm using this, which doesn't work (or i wouldn't be here :D )
var images = ($('#photo[style*="display: none"]').length === 0 ? false : true);
if (images) {
$('#yes[value="Yes"]').click();
}
else {
$('#no[value="No"]').click();
}
(The clicks are for the radio buttons on the form that I am filling out based on this image query)
As of right now the if/else statement is giving the radio "No" a click on a page where it should be a yes. I've tried using
if (!images) {
$('#yes[value="Yes"]').click();
}
else {
$('#no[value="No"]').click();
}
just to see if my boolean was incorrect. But with that adjustment it just does the opposite again. Any help is much appreciated. Thanks

So it is always display:none when not present? jQuery has a specific selector for that :visible.
var present = $("#photo").is(":visible");

To find out whether the image is visible or not:
$('#image:visible').length;
With reference to your own posted code, you could use:
var imageVisible = $('#image:visible').length,
toClick = imageVisible ? 'yes' : 'no';
$('#' + toClick + '[value=' + toClick + ']').click();
Or, avoiding the unnecessary attribute-selectors (given that an id is a unique identifier:
$('#' + toClick).click();
References:
:visible.

Related

Changing image src depending on which word is in the element

I want to change the image displayed depending on which word is in the element, which will change frequently. I have tried using the indexOf method, to try and seach for the keyword which will decide whether to show a specific image in element 1 or element 2, but without luck.
<div class="main>
<h1 id="nextGame" onLoad="nextGames()">Aug 25, 2019: Home against Genoa</h1>
<p id="homeTeam"><img src="" id="teamHome"> vs <img src="" id="teamAway"></p>
</div>
<script>
var nextGame1 = document.getElementById("nextGame").indexOf("Home");
if (nextGame1 !== -1); {
document.getElementById("homeTeam").src = "asroma2.png";
} else {
document.getElementById("teamAway").src = "asroma2.png";
}
</script>
I expected my code to be able to see if the element "nextGame" had the string "Home" in it. If so, the image source of "homeTeam" would be changed to my specified src, and if not "teamAway" would be assigned the src.
This was clearly not the case.
Does anyone know what I did wrong?
Using document.getElementById("nextGame") will result in complete HTML Tag instead of the text present in the tag. You can use document.getElementById("nextGame").innerText to get the text inside the tags and then you can use the indexOf operator to identify if "Home" is present in it or not. The complete code will be written as follows:
<div class="main>
<h1 id="nextGame" onLoad="nextGames()">Aug 25, 2019: Home against Genoa</h1>
<p id="homeTeam"><img src="" id="teamHome"> vs <img src="" id="teamAway"></p>
</div>
<script>
var nextGame1 = document.getElementById("nextGame").innerText.indexOf("Home");
if (nextGame1 !== -1) {
document.getElementById("homeTeam").src = "asroma2.png";
} else {
document.getElementById("teamAway").src = "asroma2.png";
}
</script>
You have also closed the if statement with a semicolon and also used an additional closing bracket at the end, both of which will throw a syntax error.
I think you want to use something like
var nextGame1 = document.getElementById("nextGame").innerText.indexOf("Home");

Click on link to change the src of an image without jQuery

I want to click on a link to change the source of an image. Here's what I have come up with so far :
HTML :
click
<div id = "bulb">
<center><img src = "C:\Users\hp\Desktop\on.gif" style = "width:180px;height:270px;position:relative;top:25px;border:2px solid black;"></center>
</div>
JS :
function changesrc() {
var work = document.getElementById('bulb');
if (work.src.match(C:\Users\hp\Desktop\on)) {
work.src = "C:\Users\hp\Desktop\off.gif";
}
else {
work.src = "C:\Users\hp\Desktop\on.gif";
}
}
I am a beginner in javascript, so please help me. According to me, on clicking the a (with text click) the function change src gets executed.that func. has a variable work. the work calls the element by id = bulb. If that variable's(work's) src matches that of the image on my desktop(with the bulb on
) then it gets changed to off else it changes to on(as if it isn't on that means it's off and so we change that).
I took help from w3schools. I looked up similar questions. I even changed work.src to bulb.src . Still cant find my mistake. Please help and tell me what's causing this!!! No jQuery please as I don't know it yet.
document.getElementById('bulb') is not an image. In your code you are changing the "src" of the <div>.
Change the id to the image, like:
click
<div style="text-align:center;"">
<img id="bulb" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-logo-med.png?v=d9b0b6647f17" style="width:180px;height:270px;position:relative;top:25px;border:2px solid black;">
</div>
And Javascript:
function changesrc(){
var work = document.getElementById('bulb');
if(work.src.indexOf('se/se-')){
work.src = 'http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png?v=6f86a5fa447f';
}
else{
work.src = 'http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-logo-med.png?v=d9b0b6647f17';
}
}
Update:
"return" corrected: onclick="changesrc(); return false;".
if (work.src.match(C:\Users\hp\Desktop\on)) {
This should be matching a string?
if (work.src.match('C:\Users\hp\Desktop\on')) {
You're using the match function which expects a RegExp as a parameter. Actually I think that in your case you could just compare the strings:
if (work.src === 'C:\Users\hp\Desktop\on') {

Enable Javascript function on image click

I had an image which appears on the click of another image.
I'm posting the code below. Please tell me where I went wrong. Thanks !
JavaScript
function suit1() {
var element = document.getElementById("suit1");
element.setAttribute("Hidden", "False");
}
HTML
<img src="suit1.png" style="width:100%; height:595px;" hidden="true" id="suit1"/>
<img src="point.png" onclick="javascript:suit1()">
Try this:
function suit1() {
var element = document.getElementById("suit1");
element.removeAttribute("hidden");
}
As stated in the comments, the number in suit1() was causing the issue. However, changing the function name to any name other than the id for first img resolves the problem. HTML:
<img src="suit1.png" style="width:100%; height:595px;" hidden="true" id="suit1"/>
<img src="point.png" onclick="javascript:some1()">
JavaScript:
function some1() {
var element = document.getElementById("suit1");
element.removeAttribute("hidden");
}
Or change the id of the img.

Hide img if it equals a certain height

I'm building a small portfolio with tumblr as my CMS and I need to have thumbnails on the index page. Without hardcoding this, the best way to make this happen seems to be to embed the thumbnail in the body post so the image is pulled through then hiding it on the post page by altering the css to `display:none' by matching it's unique height compared to other images.
It seems great in theory but currently isn't working. What have I missed? The parent div class is .text
<script type="text/javascript">
$(document).ready(function() {
var hide = $('.text img').data-orig-height();
if (hide === 167) {
$('.text img').css('display', 'none');
} else {
$('.text img').css('display', 'block');
}
});
</script>
Image html
<figure class="tmblr-full" data-orig-height="167" data-orig-width="310">
<img src="http://40.media.tumblr.com/d190030c491be51fd47dd1f4291ae9c3/tumblr_inline_nxblnf7rF61tfshob_400.jpg" data-orig-height="167" data-orig-width="310" width="310" height="167" data-meow="true">
</figure>
Use attribute-value selector
$('.text img[data-orig-height="167"]').hide();
This will select all the images inside the .text element having data-orig-height attribute value as 167.
$('.text img[data-orig-height!="167"]').show(); // Show the images whose attribute value is not 167
In the OP code,
$('.text img').data-orig-height();
is not valid function. This'll throw data-orig-height is not a function error.
To get data-* attribute value, use data().
Three problems here:
1 - jQuery does not have a data-orig-height function. You can use the data function.
2 - === comparison will not result in type coercion, so "167" !== 167.
3 - Calling data will only return the first element's data. You want to handle each element individually, which warrants a for-loop.
Try the following:
$('.text img').each(function (k, img) {
var $img = $(img);
if($img.data('origHeight') == 167) {
$img.hide();
} else {
$img.show();
}
});
This :
$('.text img').data-orig-height();
Should be :
$('.text img').data('origHeight');

jQuery show, get element by name

I'm creating a news page. I need to find out if there is set an anchor to an article. If not, I just show the latest article. An example URL with anchor is: example.com/news.php#article43
The HTML structure is:
<div>
<a name="article43"></a>
<h2>TITLE</h2>
<div class="news_content"></div>
</div>
And my JS is this:
var anchor = $(location).attr('href').split('#');
if(anchor[1]){
$('a[name=' + anchor[1] + ']').next('.news_content').show();
}else{
$('.news_content').first().show();
}
Something doesn't work.
next will only return the immediate sibling after the element, you probably want nextAll:
$('a[name=' + anchor[1] + ']').nextAll('.news_content').show();
or, if your HTML structure doesn't involve wrapping, ie:
<div>
<a name="article43"></a>
<h2>TITLE</h2>
<div class="news_content"></a>
<a name="article44"></a>
<h2>TITLE</h2>
<div class="news_content"></a>
</div>
You'd want: http://jsfiddle.net/AVg3y/
$('a[name=' + anchor[1] + ']').nextAll('.news_content').first().show();
Also, this is probably just a typo, but your HTML is malformed. It should be:
<div>
<a name="article43"></a>
<h2>TITLE</h2>
<div class="news_content"></div> //<-- oops
</div>
Try this (use siblings instead of next):
var anchor = location.href.split('#');
if(anchor[1]) {
$('a[name=' + anchor[1] + ']').siblings('.news_content').show();
} else {
$('.news_content').first().show();
}
You can get the hash by looking at window.location.hash. Use substring(1), to return everything after the # in the window.location.hash value.
if(window.location.hash) {
$('a[name=' + window.location.hash.substring(1) + ']').next('.news_content').show();
} else {
$('.news_content').first().show();
}
I solved the problem.
First: I ned to use nextAll() as many of you said.
Second: I included a CSS with jQuery (one that's only used when JS is enabled). I had to include this before the $(document).ready function. Else it was setting the news_content elements to display:none
Thanks to all who tried to help me.
All the answers have simlilar variations for hash, but none check to see if the hash has a matching element:
I suggest checking that the element exists as part of condition.
var contentToDisplay=$('.news_content').first();
if(anchor[1]){
var $link= $('a[name="' + anchor[1] + '"]');
contentToDisplay= $link.length ? $link.next().next('.news_content') : contentToDisplay;
}
contentToDisplay.show()

Categories