Jquery show hide not working - javascript

<div class="content" id="current">
<div id="loader" style="display:none;"><img src="/images/loader.gif" alt="" /></div>
</div>
I have this code. Above, which is a Box, and on submitting a button, I want a loader image there then when i get the response back, i want the image that s in the response to fadeIn.
When i click submit, I dont see the loader and I dont see the image replacing into #current.
$('#Submit').click(function (e) {
$('#error').html("");
e.preventDefault();
code = $('#Code').val(),
$('#loader').show();
$.post('/home/foo/', { code: code },
function (data) {
$('#loader').hide();
alert(currentItem.ItemImage);
$('#current').html(currentItem.ItemImage);
How can i fix this?
What am i doing wrong?

I'm thinking you need a semicolon after this line, not a comma:
code = $('#Code').val(),
to
code = $('#Code').val();

Turns out that within css .content img {display: none} was causing loader not to show.

Related

Set hidden value via clicking on <a> block

Could you help me with this one please?
If you click on my hosting http://www.gosu.cz and select first image from top|left then it's gonna expand on top of the page with a additional info.
Header
Description
link
Now I need to set hidden value for each image which is defined as:
<li class="item col-xs-12 col-sm-6 col-md-4">
<a href="http://placehold.it/857x712" data-caption="description">
<img src="http://placehold.it/857x712" class="img-responsive" alt="alt" />
</a>
</li>
and when is selected then it's gonna show up at this div which is right below header:
<a href="LINK+KEYWORD">
<div class="least-preview"></div>
</a>
Any ideas how could I do that please? My poor skills in programing includes some basic of html, php but not scripting.
This is how it looks like: http://imgur.com/a/CU30N
Cheers,
Martin
So as David Arce suggested it might be done through alt value.
What I have done is using script at the start and also creating link for search queue:
<script>
$(document).ready(function() {
$('img').click(function () {
var alt = $(this).attr("alt")
var strLink = "link&Key=" + alt;
document.getElementById("link").setAttribute("href",strLink);
});
});
</script>
Thanks to document.ElementById... I was able to set a href value via id to generated link.
<a id="link">
<div class="least-preview"></div>
</a>
I think you can use an tag like this inside the li tag
<input type="hidden" name="Image_details" value="Additional details offf that image">
And then on img onclick="getDetails();"
in js:
function getDetails()
{
div.innerHTML = document.getElementById("Img_details").value;
}
//The code is conceptual, so the idea is to assign the hidden input value to the when an image is clicked or selected
I am not quite sure what you are trying to hide, or what you want your code to do. If you want something to be hidden or visible you can use the visibility property in the css for the element you want to hide.
/* Hides h2 element */
h2 {
visibility: hidden;
}
/* Shows h2 element (default value)*/
h2 {
visibility: visible;
}
Here is the reference here...
http://www.w3schools.com/cssref/pr_class_visibility.asp
In enlightenment to what the question is, you can have an onClick="function()" attribute to your image which will grab whichever value, id, class, etc you have in your new which can be put into a search query by variable. All can be done through a function.
$(document).ready(function() {
$('img').click(function () {
var alt = $(this).attr("alt")
var strLink = "link&Key=" + alt;
document.getElementById("link").setAttribute("href",strLink);
});
});

Click image within slider to show text

On http://www.socialstudent.co.uk/stackoverflow/ I am trying to work out a way to make it so when you tap an image on mobile, it makes text appear below it and a button. Then if you tap it again it disappears.
I have tried the usual ways in JS but none seem to work. Any ideas on how I can get that to happen would be great!
An example would be this - http://jsfiddle.net/ZECTP/ but with the image being tapped on mobile.
JS off jsfiddle as was required:
$(function () {
var div = $('#showOrHideDiv');
$('#action').click(function () {
div.fadeToggle(1000);
});
});
HTML off jsfiddle as was required:
<a id="action" href="#">hide/show text</a>
<div id="showOrHideDiv" style="display: none;">hidden text</div>
It needs to be in addition to the text which is on the image, as below text and a button needs to appear.
Thanks!
I checked the source code of the site you provided and you would need to add this code to get the desired effect. I'm assuming you want to show/hide the text over each image.
var elems = $('#my_horizontal_main_stage li');
elems.find('div').hide(); // text hidden by default, or you can use css
elems.on('click', function(e){
el = $(this);
el.find('div').fadeToggle('fast');
})
Check this udpated fiddle
I think this is what you are looking for.
HTML
<figure class = "figure">
<img src = "http://icons.iconarchive.com/icons/dapino/summer-holiday/96/photo-icon.png" />
<figcaption class = "figcaption">
SOME TEXT HERE
</figcaption>
</figure>
CSS
figure {
font-size: 100%;
}
figcaption {
display: none;
}
jQuery
$(document).ready(function(){
$(".figure").click(function(){
$(".figcaption").toggle();
});
});

Link not working on image?

I've been attempting to create an effect where a user clicks on an image, that image is replaced by another image which also acts as a link.
However my problem is that whenever I click the replaced image, the link doesn't work.
Fiddle: http://jsfiddle.net/ha6qp7w4/321/
$('.btnClick').on('click',function(){
$(this).attr('src','https://placekitten.com/g/200/300')
$(this).attr('href','google.com')
});
img tags don't have href properties. You need to wrap the image in an anchor and assign the url to that, or do a custom redirect.
Notice your image html on inspection of element:
<img src="https://placekitten.com/g/200/300" id="1" class="btnClick" href="google.com"> <!-- not valid! -->
This isn't valid because imgs aren't anchors!
function first() {
this.src = 'https://placekitten.com/g/200/300';
$(this).unbind("click");
$(this).on("click", second);
}
function second() {
window.location.href = "https://www.google.com";
$(this).unbind("click");
$(this).on("click", first);
}
$('.btnClick').on('click', first);
(I tried to make a fiddle but it wouldn't save, but this should work)
You need to store your actions in functions so you can revert if need be. First action is the change the source, then change the event to redirect you like a link.
here is an example.
example
html part
<img src="http://i.imgur.com/o46X87d.png" data-new="http://i.imgur.com/9lf2Mjk.png" id="1" class="btnClick" />
add data-new attribute on image with new url of image
and replace it with js
$('.btnClick').on('click',function(){
var url = $(this).attr("data-new");
$(this).attr("src", url);
});
I would use a totally different approach, but here's how to do that with the code you already have:
<div class="btnClick">
<img src="http://i.imgur.com/o46X87d.png" id="1" />
<a href="javascript:check()" id="2" style="display:none;">
<img src="http://i.imgur.com/9lf2Mjk.png" id="static" />
</a>
</div>
<script type="text/javascript">
$('.btnClick').on('click',function(){
if($('#1').is(':visible')) {
$('#1').hide();
$('#2').show();
} else {
$('#1').show();
$('#2').hide();
}
});
</script>
I purposely didn't use toggle() to better show the technique, in case you'd want to turn the click event off when the clicking image appears etc.

jquery fadeout/fadein flicker issue

i have read several posts on this but none seems to solve my issue,
when I fadeout a gallery, the other fades in, that works fine...but the item that fades in seems to 'refresh' or fade in again (real quick) after the fadein animation completed, here's my code:
what I have is basically a photo gallery (photographySection) contained inside a 'mediaContainer', this is the css:
.mediaContainer {
position: relative;
}
.photographySection {
top: 10px;
left:0;
position: absolute;
}
html:
<div class='mediaContainer'>
<div class='photographySection hidden' id='photographyExperimental'>
<ul><li><img src...></li></ul>
</div>
<div class='photographySection hidden' id='photographyFaces'>
<ul><li><img src...></li></ul>
</div>
</div>
js:
$(".photographyMenu").click(function(event){
$(".photographySection").hide(1,function() { // hide all sections
var section = $(event.target).attr("section"); // read new section to show
$("#"+section).fadeIn(500); // for example $("#photographyFaces")
});
});
everything works smoothly, but sometimes after the chosen div fades in, it flickers/blinks once for some reason
thanks!
Do you really need all that markup for such a simple task? If all you want is just fade a bunch of images in and out, you could do something like this:
html markup:
<div class="mediaContainer">
<img src="" />
<img src="" />
<img src="" />
</div>
jQuery:
function fadeInOut(){
var imgs = $('.mediaContainer > img');
imgs.wrapAll('<div class="slideshow" />');
$('.slideshow > img:gt(0)').hide();
setInterval(function(){
$('.slideshow > img:first')
.fadeOut(500)
.next('img')
.fadeIn(500)
.end()
.appendTo('.slideshow');
}, 5000);
}
Maybe someone more experienced can improve upon this code. You can also set vars to those "magic numbers" (500/5000) and some other things, but that should solve the problem with much less code (just an option).
Just don't use the 500, and it will work smoother, slow is 600miliseconds and normal is 400miliseconds
You can try this one: http://jsfiddle.net/S4sbm/
$(".photographySection:gt(0)").hide();
$(".photographyMenu").click(function(event){
$(".photographySection").fadeOut(500);
var section = $(event.target).attr("section"); // read new section to show
$("#"+section+':hidden').fadeIn(500); // for example $("#photographyFaces")
});
checkout the fiddle and see if this helps.

How to add a fade-in effect in jQuery text

How to add a fade-in effect when the data is returned to the #results div?
$('#results').html(data);
I tried
$('#results').html(data).fadeIn('slow');
but it doesn't seem to work
My code
submitHandler: function(form) {
// do other stuff for a valid form
$.post('mailme.php', $("#myform").serialize(), function(data) {
$('#results').html(data).fadeIn('slow');
});
}
You gotta hide the div first.
$('#results').hide().html(data).fadeIn('slow');
This might just do the trick.
$('#results').css('display', 'none').html(data).fadeIn('slow');
you have to hide element firstly when you are working with "fadeIn".
here is a example, I believe you will understand after trying and editing that:
<img style="display: none;" id="google" src="http://www.google.com.tr/images/srpr/logo3w.png" alt="" />
<script>
$(document).ready(function() {
$('#google').fadeIn(1200,function(){});
});
</script>

Categories

Resources