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');
Related
I have a series of the following elements:
<div class="slidetpl">
<img src >
</div>
I want to hide .slidetpl if the image has no source. To do that I have tried the following:
$('.slidetpl img').each(function () {
if (this.src.length == 0) {
$(this).parent().hide();
}
});
But this is not working.
Can anyone point me in the right direction or tell me what I've done wrong?
This does the effect for me:
// Start an immediate invocable function expression, to auto
// execute the internal code and isolate the code from the
// outside JS scope.
(function( $, window, undefined ){
// Find all the document images and iterate over them. In case you like to
// to iterate only under slidetpl change the selector from
// img to .slidetpl img
$( 'img' ).each(
function() {
// If the empty string is equal with the src attribute of
// of the current item in the iteration
if ( '' === $(this).attr('src') ) {
// Then hide the current item in the iteration.
$(this).hide();
}
}
);
})( jQuery, this )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" />
<img src />
<img src="http://www.iconsdb.com/icons/preview/icon-sets/web-2-orange-2/running-man-xxl.png" />
Note, the above code will hide all the images with empty src attribute. In case you like to hide only the children elements of the .slidetpl then you can modify the selector from img to .slidetpl img.
Try this:
$(document).ready(function(){
$('.slidetpl img[src=""]').parent().hide();
$('.slidetpl img:not([src=""])').parent().show(); //Can be removed.
});
You are very close, just missing the correct syntax of this, refer below:
if ($(this).attr('src').length == 0)
Watch out the demo here.
$('.slidetpl img[src=""]').hide();
I am trying to toggle images from the thumbnail to the feature image when the thumb nail is clicked. Currently when its clicked the images will swap but I cant get them to swap back with the thumb nail is clicked on again. I've tried using toggle but when the thumb nail is clicked on it would remove the image completely and I couldnt get any image to return. Currently this will switch the images but not switch or toggle them back on click.
$(".browseTable").on('click', 'td', function () {
var thumbNail = $(this).parent('tr').find('img').attr('src');
var feature = $('#featureImg img').attr('src');
$('#featureImg img').fadeOut(400, function () {
$(this).fadeIn(400)[0].src = thumbNail;
});
});
You can use data for store source string and toggling images
preview on : https://jsfiddle.net/5kxf65Lx/
<img src="source1.jpg" data-srcfirst="source1.jpg" data-srcsecond="source2.jpg" />
<script type="text/javascript">
$('img').click(function(){
var loaded = $(this).attr('src')
var first = $(this).data('srcfirst')
var second = $(this).data('srcsecond')
if(loaded == first){
$(this).attr('src' , second)
} else {
$(this).attr('src' , first)
}
})
Try this. When the parent is clicked we toggle both children. The large version starts off hidden.
<div class="toggle js-toggle">
<img src="http://www.placehold.it/100x100" alt="" class="toggle__thumb js-toggle-image"/>
<img src="http://www.placehold.it/500x500" alt="" class="toggle__active js-toggle-image" style="display: none" />
</div>
The jQuery
$('.js-toggle').on('click', function() {
$(this).find('.js-toggle-image').toggle();
});
https://jsfiddle.net/uoLv2nkh/1/
Or an only CSS way if you only care about when the user is clicking.
https://jsfiddle.net/uoLv2nkh/
You can achieve your target via setting src of image in css.
.imageOne{
content:url(YOUR SOURCE);
}
.imageTwo{
content:url(YOUR SOURCE);
}
add class to your image element in start
check if element exist by either class if exist toggle() to another, this will change the image back to another.
And use toggle() like following example
$(".browseTable").on('click', 'td', function () {
//var thumbNail = $(this).parent('tr').find('img').attr('src');
//var feature = $('#featureImg img').attr('src');
//$('#featureImg img').fadeOut(400, function () {
// $(this).fadeIn(400)[0].src = thumbNail;
//});
$('#featureImg img').find('.imageOne, .imageTwo').toggle();
});
I am able to use toggle simply to change one element to another. etc. hope it will help you.
Is it possible to set the equivalent of a src attribute of an img tag in CSS?
I am making a price estimator.
How would correctly write a jQuery function that checks a variable and depending on that amount hides/shows a certain div element accordingly.
So if I had:
a HTML div with the ID 'Answer'
<div id="answer">Hide Me</div>
$("#answer")...
a variable (this variable would change)
var x = 30
Now I know the css to hide the div would be:
#answer{
visibilty:hidden;
}
What would be the correct way to hide the function checking these certain parameters? for example if x > 20 then hide etc
Now I know there will be many ways to do this and they may not require jQuery, please inform me if this is the case. Perhaps it just needs JS. I know there will be many ways to do it not just one so if you have a different way please comment as I am keen to learn.
Any help would be greatly appreciated.
Cheers
F
Note that you can also remove or add a class:
$('#answer').removeClass('hide');
$('#answer').addClass('hide');
But what you want to do is $('#answer').hide(); or $('#answer').show();
Execute this function providing the variable v:
var checkVar = function(v) {
var target = $('#answer');
if (parseInt(v) > 20) {
target.hide();
} else {
target.show();
}
}
For example, if the variable comes form a selection:
$('#selectId').on('change', function() {
checkVar($(this).val());
});
Remove the CSS. You can do it in jQuery
if(x>20){
$('#answer').hide();
}
You can use this one
$("#answer").hide();
#kapantzak's answer looks good. But keep your logic and style separated and if your not going to use the variable for the actual element twice, I wouldn't make it. So go:
var checkVar = function(var) {
var element = $('#answer');
if (parseInt(var) > 20) {
element.addClass('hidden');
}else{
element.removeClass('hidden');
}
}
And in your CSS go:
#answer.hidden{
display: none;
}
Also, depending on your preference, display: none; doesn't display anything of the object whereas visibility: hidden hides the object but the space the object was occupying will remain occupied.
HTML
<input id="changingValue">
...
<div id="answer">Hide Me</div>
CSS (not mandatory if you check values on loading)
#answer{ display:none;}
JS
var limit = 20;
$(function(){
$("#changingValue").change(function(){
if(parseInt($("#changingValue").val())<limit) { $("#answer").show(); }
else { $("#answer").hide(); }
});
});
I'm trying to hide a button while a div have style positioned as 0.
The whole JS code to explain is:
$('#left-button').click(function() {
event.preventDefault();
$('#myTab').animate({
left: "+=200px"
}, "fast");
});
The code above WORKS. If I click on the button (left-button), the "mytab" div goes to the left. Now, I want to hide the #left-button, when the #myTab has style "left:0".
I tried this:
if ($('#myTab').css('left') == '0') {
$('#left-button').style.display = "none";
}
The basic style is
#myTab { width:300px; height:300px; position:relative; left:0; background:#777 }
#left-button {width:200px; height:200px; background:#ccc; }
There's no debug errors but nothing happens. What can I do?
If there's another method instead Js, let me know too.
Thank you very much.
http://jsfiddle.net/SgMDa/
You were just missing the unit value px
if ($('#myTab').css('left') == '0px') {
$('#left-button').hide();
}
And use .hide() instead style.display = "none";
Working Fiddle
The main problem in your code is with the line $('#left-button').style.display = "none"; and you have missed 'px' in the if condition if ($('#myTab').css('left') == '0') {
The if should be if ($('#myTab').css('left') == '0px') {
$ object returns jQuery wrapped array / object, what you are trying to access is the actual DOM element, so you have two options to access DOM element:
1. Using jQuery method hide()
$('#left-button').hide();
or
2. Using DOM property display
$('#left-button')[0].style.display = "none";
NOTE:
The jQuery Object: The Wrapped Set: Selectors return a jQuery object
known as the "wrapped set," which is an array-like structure that
contains all the selected DOM elements. You can iterate over the
wrapped set like an array or access individual elements via the
indexer ($(sel)[0] for example). More importantly, you can also apply
jQuery functions against all the selected elements.
Official information about jQuery Object
I think it is like you are getting value from left, try using the offset function
if ($('#myTab').offset().left == 0) {
$('#left-button').hide();
}
.css gives you measurement in px so you should try :
if ($('#myTab').css('left') == '0px') {
$('#left-button').style.display = "none";
}
I have a page with a content accordion with 8 items. I also have an h4 tag on the page outside of the accordion. I want to hide which ever content accordion item matches the text inside the h4 tag.
The text inside the h4 tag and the content accordion items might change so I need to use variables (I think).
Here is what I have so far:
var category = $('.leftColumnNav h4').html();
var topic = $('.contentAccordionItemTitle p').html();
if(topic === category){
$(".contentAccordionItemTitle").css("display", "none");
} else {
$(".contentAccordionItemTitle").css("display", "block");
}
What I have sort of works. It successfully hides the .contentAccordionItemTitle. Unfortunately it obviously hides all of them. I just want to hide the one that matches the h4 tag.
If it's needed I can probably create a JSFiddle example.
var category = $('.leftColumnNav h4').text();
$(".contentAccordionItemTitle").each(function() {
if ($(this).text() === category) { $(this).hide() }
})
var topic = $('.contentAccordionItemTitle p').html();
That line means you're getting all the p-tags. If you want to continue down this solution, you could use the jQuery each function -> http://api.jquery.com/each/
$(".contentAccordionItemTitle").css("display", "none");
} else {
$(".contentAccordionItemTitle").css("display", "block");
The $(".contentAccordionItemTitle") also gets all elements with this class.
You should use a loop, like jQuery each:
var category = jQuery('.leftColumnNav h4').html();
jQuery('.contentAccordionItemTitle p').each(function() {
if(jQuery(this).html() === category) {
jQuery(this).parent('.contentAccordionItemTitle').css('display', 'none');
} else {
jQuery(this).parent('.contentAccordionItemTitle').css('display', 'block');
}
This is assuming there is only one element that matches jQuery('.leftColumnNav h4')