I want to add slideUp effect to my page. My <body> code is:
<script>
$('#slide_up').click(function(){
$('p.text_study').slideUp('slow', function() {
$('#result').html("ok");
});
});
</script>
<img src="img/slide_up.png" alt="slide_up" id="slide_up">
<p class="text_study">Some text.</p>
<div id="result"></div>
When i click a button nothing happens. Please help.
Wrap it in $(document).ready. Your click handler is being assigned before the #slide_up element is ready for use:
$(document).ready(function(){
$('#slide_up').click(function(){
$('p.text_study').slideUp('slow', function() {
$('#result').html("ok");
});
});
});
JSFIDDLE http://jsfiddle.net/3uhCa/2/
Nothing wrong with your code. are you loading jquery correctly?
<img src="img/slide_up.png" alt="slide_up" id="slide_up">
<p class="text_study">Some text.</p>
<div id="result"></div>
Related
I'm trying to get the button to toggle between showing text in different languages. When I click the button nothing happens, can someone help out please?
$(document).ready(function() {
$('[lang="jp"]').hide();
$(document).on('click', '#switch-language', function() {
$('[lang="en"]').toggle();
$('[lang="jp"]').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="switch-lang">Switch Language</button>
<p lang="en">eigo</p>
<p lang="jp">en japon</p>
You have a typo in your Selector.
$(document).ready(function() {
$('[lang="jp"]').hide();
$(document).on('click', '#switch-lang', function() {
$('p[lang="en"]').toggle();
$('p[lang="jp"]').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="switch-lang">Switch Language</button>
<p lang="en">eigo</p>
<p lang="jp">en japon</p>
No element has "switch-language" as the ID. When you change it to the correct value, "switch-lang", it works.
$(".site-main").on("sf:ajaxstart",function(){
alert("show loader");
});
$(".site-main").on("sf:ajaxfinish",function(){
alert("hide loader");
});
I got this above code from a forum and it is showing me the alerts as it should. However, I'm planning to show a loader image with location path <img src="/path/image.gif" class="loader"> instead of the alert.
How can I go about this?
You could do like this
$(".site-main").on("sf:ajaxstart",function(){
$('img.loader').show()
});
$(".site-main").on("sf:ajaxfinish",function(){
$('img.loader').hide()
});
Note:- You can do toggle show hide.based on events triggered. Here is the basic demo which will help you to understand the functionality.
$(document).ready(function() {
$(document).ajaxStart(function() {
$("img").show();
}).ajaxStop(function() {
$("img").hide('slow');
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://icon-library.net/images/loading-icon-png/loading-icon-png-12.jpg" height='50px' width='50px' alt="Loading" class='loader' style="display:none">
<form>
<button type="button" class="btn" onclick="showLoader(); return false;">Show Data</button>
</form>
<script>
function showLoader() {
$.post("/echo/json", {});
}
</script>
I want to add a spinner below or in the place of the button on click event. I am trying with something like this.
not able to get this working.
Here's the fiddle.
<div class = "example test">
<img src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211776983.png" onclick="$('.test').click();">
<div id="justamoment" style="text-align: left;font-family: Signika;color: white;font-size:14px;font-weight: bold;text-decoration: none;visibility:hidden">
<p>
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif" height="12" width="12" Just a moment..
</p>
</div>
<script>
$(".test").change(function(){
$("#justamoment").css("visibility","visible");
});
</script>
Please help.
You need to have a click handler not change
$(".test").click(function () {
$("#justamoment").css("visibility", "visible");
});
Demo: Fiddle
Try this
USe 'click' instead of 'change' . It will work
Wokring fiddle fine
What about this :
$(".test").click(function () {
$("#justamoment").css("visibility", "visible");
});
DEMO
Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???
You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});
try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.
$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});
The following function toggles a div when clicked on the relative id. Any way to set it up so that when the page loads, the div being toggled starts out closed?
I dont want them to be seen until clicked on.
Best,
Joey
<script type="text/javascript">
$(document).ready(function() {
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
Just hide them on dom ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$(".exclusive-architects, .exclusive-international,
.exclusive-designers, .exclusive-historical").hide();
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
You should just need to add a display:none to your starting CSS
DEMO
if your HTML looks like this:
<div id="buttons">
<div>toggle architects</div>
<div>toggle international</div>
<div>toggle designers</div>
<div>toggle historical</div>
</div>
<div class="cont"> architects content </div>
<div class="cont"> international content </div>
<div class="cont"> designers content </div>
<div class="cont"> historical content </div>
Than all you need is:
$('.cont').hide(); // HIDE ALL INITIALLY
$('#buttons div').click(function(){
$('.cont').eq( $(this).index() ).toggle();
});
$(function(){ // DOM ready
$(".exclusive-architects").hide();
$(".exclusive-international").hide();
$(".exclusive-designers").hide();
$(".exclusive-historical").hide();
});
it should work :)