I'm looking at running this script:
$(document).ready(function() {
$('a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load($(urlyep).attr('href'));
});
});
This loads content from a local HTML file via a menu hyperlink into the #content div. It works great but I want to make it more specific so it only works when the click is made in the #menubar div.
Err… You mean $('#menubar a').click(…) ?
<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this)
e.preventDefault();
$("#content").load("yourexternalpage.html");
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" >menubar</div>
If you have more than one link on the menu bar, I am assuming you have, each needing to load it's own content/page you could do something like the following.
<script type="text/javascript">
$(document).ready(function() {
$('#menubar a').click(function(e) {
var urlyep=(this.name);
e.preventDefault();
$("#content").load(urlyep);
});
});
</script>
<div id="content" >new content will go here</div>
<div id="menubar" ><a href="#" name="page1.php" >menubar link1</a>-<a href="#" name="page2.php" >menubar link2</a></div>
Related
http://jsfiddle.net/cEJtA/
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
$(".div1, .div2").hide();
if ($(this).attr("class") == "link1")
{
$(".div1").show();
}
else
{
$(".div2").show();
}
});
});
Can anyone please help with this code.
I want 5 divs that work based on the link that's clicked, so there are 5 divs either shown/hidden.
I can do everything except the if/else statement for more divs - any help please?
Off the top of my head, you can add a data attribute on the class and use that to toggle the targeted div element.
$(function () {
$(".div1, .div2,.div4, .div3, .div5").hide();
$("a").bind("click", function () {
$(".div1, .div2,.div4, .div3, .div5").hide();
var target = $(this).data("target");
$("."+target).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
Link 1
Link 2
Link 3
Link 4
Link 5
<div class="div1">I'm div1</div>
<div class="div2">I'm div2</div>
<div class="div3">I'm div3</div>
<div class="div4">I'm div4</div>
<div class="div5">I'm div5</div>
</body>
</html>
you could also get the current element's class, parse it and generate div class name off of it and use that to show/hide things. e-g
link1 => div1 (replace link with div)
Try this way
<html>
<body>
Link 1
Link 2
<div id="link1" class="commonDiv">I'm div1</div>
<div id="link2" class="commonDiv">I'm div2</div>
</body>
</html>
$(function () {
$(".commonDiv").hide();
$(".link1, .link2").bind("click", function () {
$(".commonDiv").hide();
var id = $(this).attr("class");
$('#' + id).show();
});
});
I am doing and show functionality I'm tried scenarios but it is not working, Please let me know what i did mistake.
My code :
function showButtons() {
$("#view").click(function(){
$("#allversion").show();
});
$("#view").click(function(){
$("#allversion").hide();
});
}
<div id="allversion" style="display:none">
SOME DISPLY CODE HERE
</div>
let me know the changes i need to made
<a onclick="showButtons()" id="view">View More</a>
Problem is that every time you call function showButtons that binds additional 2 click events every time (so clicking on link 2 times you will have 4 events in total). And your code shows and hides element at the same time.
You need to toggle it:
$(document).ready(function() {
$('#view').click(function() {
$('#allversion').slideToggle();
});
});
#allversion {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="view">View More</a>
<div id="allversion">VISIBLE!</div>
You don't need to call onclick="showButtons()" event for that. You can easily hide and show your section something like this:
$(document).ready(function(){
$("#view").click(function(){
$("#allversion").toggle();
});
});
I recommend you to use toggle method. The problem is that you have to use one single click event handler.
$("#view").click(function(e){
$("#allversion").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a id="view">View More</a>
You can use toggle as suggested by others or you can try this
$("#view").click(function(){
if($("#allversion").hasClass('show'))
{
$("#allversion").removeClass('show').addClass('hide');
}
else
{
$("#allversion").removeClass('hide').addClass('show');
}
change to the following code, it should work.
<a id="view">View More</a>
var isClicked = false;
$( "#view" ).click(function() {
if (isClicked == true) {
$("#allversion").css("display", "none");
isClicked = false;
}
else {
$("#allversion").css("display", "inline");
isClicked = true;
}
});
Also you can use .toggle() to switch the visibility.
<a id="view">View More</a>
$( "#view" ).click(function() {
$("#allversion").toggle();
});
As per your question "Why isn't my code working?".
If your code is exactly as is here as on your site, it's not working because the script is initializing before the DOM is loaded.
Move your script to the bottom of the page or put it in to a
$(document).ready(function(){
//Code goes here
});
This works with me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showButtons() {
$("#allversion").toggle();
}
</script>
</head>
<body>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a onclick="showButtons()" id="view">View More</a>
</body>
</html>
I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});
I have this script for my input button:
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('.menu-content').toggle('show');
});
});
});//]]>
</script>
I need to start from hidden. How I can do that? Please, help me.
Hide button by default with CSS rules:
.menu-content {
display: none;
}
If you want the element to be hidden from the beginning, you can use some CSS like this:
<div style="display: none;">...</div>
This will hide the div, without any flickering. Once you call .show() using jQuery, the div gets shown.
My friend solved my problem like this:
<div class="dupa" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('.dupa').show();
});
});
</script>
JQuery:
jQuery('#hideshow').click(function(event) {
jQuery('.menu-content').toggle();
});`
HTML:
<div style="display:none" class="menu-content">
hi
</div>
<input id="hideshow" type="button" value="show/hide">
Fiddle: http://jsfiddle.net/42rwkhL0/
you need to set the display attribute to "none" in the style of your menu-content item(s)
as some before me have pointed - start with hidding the layer. then show it after the button is clicked. I have re-worked the code a bit:
$('#hideshow').bind('touchstart click', function () {
$('.menu-content').fadeIn(1000).css('display', 'inline');
});
http://jsfiddle.net/wktzv6hL/
i want to hide id
when i click on a href so its same id shows and other id will close automatically
example :
<div id="fit" class="heading">FIT</div>
first
<div id="er" style="display:none;">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
erp
<div id="erp" style="display:none;">erp </div>
<div id="style" class="heading">style</div>
and script:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(e) {
$("a").click(function(e) {
var ab = $(this).attr("href");
//alert(ab);
//$("div").hide();
$(ab).show();
});
});
</script>
in html use class for anchor related div
<div id="fit" class="heading">FIT</div>
first
<div id="er" style="display:none;" class="anchorrel">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
erp
<div id="erp" style="display:none;" class="anchorrel">erp </div>
<div id="style" class="heading">style</div>
<script>
$(document).ready(function(e) {
$("a").click(function(e) {
e.preventDefault();
var ab = $(this).attr("href");
//alert(ab);
$(".anchorrel").hide();// all div related to .anchorrel hide
$(ab).show();
});
});
</script>
see demo
You can do this:
$(document).ready(function (e) {
// Cache the anchor tag here
var $link = $('a');
// Click event handler for the link
$link.click(function (e) {
// prevent the default action of the anchor
e.preventDefault();
var id = this.href;
// Hide all the visible divs next to all the anchors
$link.next('div:visible').hide();
// Show the current div with id
$(id).show();
});
});
If you wan't to close all other div's and display only the div with the id that matches the href of the tag clicked than use the following:
$("a").click(function(e) {
var ab = $(this).attr("href");
$('div').hide();
$(ab).show();
});
I don't know why you comment it in the first place, maybe i don't understand what you wan't to acheive.
Here is a fiddle: http://jsfiddle.net/25RZR/
Fiddle
JavaScript
$(document).ready(function(e) {
$("a").click(function(e) {
var ab = $(this).attr("href");
$('.content').hide();
$(ab).show();
});
});
HTML
<div id="fit" class="heading">FIT</div>
first
<div id="er" class="content hide">aksdjfhaskdj hskj hskjfh sd fghjgfdjf gdsjfdg jdfgjdf gjgdfjgfdjf gasdkjfasjfghsdj </div>
erp
<div id="erp" class="content hide">erp </div>
<div id="style" class="heading">style</div>
Well you can do better this way:
$(document).ready(function(e) {
$("a").click(function (e) {
e.preventDefault; // <------------stop the default behavior
var ab = $(this).attr('href'); // <------better to use in terms of performance
$(ab).show().siblings('div:not(.heading)').hide();
});
});
Demo in action