What I'm trying to accomplish seems quite simple however, I'm not great at jQuery.
I did try to get as close as possible to a solution but whenever I click on the anchor tag twice, everything disappears. Obviously I'm doing something wrong.
I would like .slider1 to be visible by default and .slider2 to be hidden.
Also, when the anchor "Fader" is clicked, .slider1 is hidden.
http://jsfiddle.net/GQJxv/
Help anyone?
I have fixed up the code for you:
http://jsfiddle.net/ZAPwD/
Something like this?
$(".slider1").fadeIn("fast");
$("a.slider").click(function() {
$(".slider2").fadeOut("fast", function(){
$(".slider1").fadeIn("fast");
});
});
$("a.fader").click(function() {
$(".slider1").fadeOut("fast", function(){
$(".slider2").fadeIn("fast");
});
});
This looks like it cross fades pretty nicely:
http://martin-fleming.co.uk/examples/jquery-crossfade/
Related
Fiddle - http://jsbin.com/udumibO/1/edit
If these divs are hidden (they're hidden by the .hide() event handler) then I want two other divs to show.
I tried the following on document.ready, but it's not working, and I have no idea why.
Here's the code.
if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
$(".starter-properties, .canvas-properties").show();
}
Any help is greatly appreciated.
Use this:
if ($('.select-properties, .div-properties, .image-properties, .table-properties').css('display') == 'none') {
$(".starter-properties, .canvas-properties").show();
}
Try this link
It might be helpfull for you.
http://jsfiddle.net/rahulsahu/eveKU/
HTML :
<div id="first-div">first div</div>
<button id="first">hide above div</button><br/>
<button id="second">show another div when first div is hidden otherwise don't show</button>
<div id="second-div" style="display:none;">Second div</div>
JQuery :
$("button#first").click(function(){
$("#first-div").hide();
});
$("button#second").click(function(){
if($('#first-div').is(':visible')) {
// do nothing
alert("first div is not hidden");
}
else{
$("#second-div").show();
}
});
I managed to accomplish the effect I wanted using the following function.
$(".select-tool, .div-tool, .image-tool, .table-tool, .edit-tool").on("mouseup touchend", function() {
if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
$(".starter-properties, .canvas-properties").show();
$(".select-properties, .div-properties, .image-properties, .table-properties").hide();
}
});
Here's the fiddle - http://jsbin.com/udumibO/3/edit
I'm sure there's a neater way to write this, but this is the best I could do to accomplish the effect I wanted.
Ok, it looks like a lot of code here. :P
Great, so I think, you just want to create a tab system and initially you want to hide all the tab content and show something else by default.
Well, Here is something which doing same as your code, and also solving your problem.
$("span", ".nav").click(function(){
var target = $("." + $(this).attr("class").replace(/tool$/g, "properties"));
target.show().siblings().hide();
$(this).addClass("active").siblings().removeClass("active");
});
$(".select-properties, .div-properties, .image-properties, .table-properties").hide();
jsfiddle: http://jsfiddle.net/ashishanexpert/c7eJh/2/
JSFiddle code is well commented.
Let me know, if something you want to add or ask about this. Good luck!
You can use
$(".target").toggle(function () {
// your remaining action. something written here
});
I have been asked to put in place disabling of the right clicks on a website, I've informed them there is so many ways that people can still download the images via Google Images, Cache, Firebug etc etc, but none the less my arguments have gone ignored and they insist this must be done.
Any, I've put in the footer some code that disables right clicking on all elements using <IMG src=""> this fails to work on NivoSlider, I did change the script to use window load on disabling the right click which works but after slide1 it stops working and I assume this is something to do with changes to the DOM.
JavaScript is by far my weakest point and I'm hoping that someone without to much trouble can either give me a full working solution or something to go on. Thanks in Advance.
They are using NivoSlider with the following trigger:
<script type="text/javascript">
(function($) {
$(window).load(function() {
$('#slider').nivoSlider();
});
})(jQuery);
</script>
And this is the code that I've placed in the footer that fails to work on slide2+
<script>
$(window).load(function() {
$('img').bind('contextmenu', function(e) {
return false;
});
});
</script>
You're absolutely right with the DOM changes. You need to delegate the event to a parent element.
Try something like this:
$('#slider').delegate('img', 'contextmenu', function(e) {
return false;
});
Or this if using jQuery > 1.7:
$('#slider').on('contextmenu', 'img', function(e) {
return false;
});
You might be able to do it by preventing the default behaviour of a right click on the image.
See this answer: How to distinguish between left and right mouse click with jQuery
I need to create a log in popup on mouse-over on a link lust like CodeProject
Sign In link works.
In my code the log in popup is not appearing on right place and mouse over is not working properly. But I want same as the code project log in popup..
How I can achieve this..
Any suggestion is appreciated..
When I read your question, the following came to mind:
http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery/
It "looks" similar to Code Project's solution, however behavior-wise, it does require minor modification; i.e. It triggers on 'click' instead of the hover/mouseover that you want.
Hopefully its somewhat useful.
first of all ...try this..
.loginpopup{display:none;....Your another style}
.loginpopup:hover{display:block;....Your another style}
I guess something like this will work, with jQuery of course.
<style>
#popup {
display: none;
}
</style>
<script>
$("#yourlink").mouseenter(function () {
$("#popup").show();
});
</script>
<div id="popup">Your popup</div>
<a id="yourlink" href="whatever">http...</a>
So I currently have two toggle boxes set up and there will be more soon, I'd like to keep the JS pretty simple and not have a new script for each area, but whenever I attempt to toggle in one place it applies the function to both other the toggle-content boxes I have set up.
In order to see both areas, open the first one and close it before opening the second so a product is added to the Recently Viewed box
http://www.coreytegeler.com/bolivares/shop/pablo-ribbed-winter-skully/
http://www.coreytegeler.com/bolivares/shop/salvador-crewneck-sweater-copy/
Here's what I have in place now:
$(window).load(function(){
$('.toggle-link').click(function(e){
$('.toggle-content').slideToggle();
e.preventDefault();
});
$(".toggle-link div").click(function()
{
$(".toggle-link div").toggle();
});
});
I tried using $(this).find('.toggle-content').slideToggle(); but still no luck.
I know this is a pretty easy fix but just can't figure it out.
Any help would be great!
$(document).ready(function(){
$('.toggle-link').click(function(e){
$(this).closest("ul").children('.toggle-content').slideToggle();
$(this).children('div').toggle();
});
});
I'm using the Zurb 'Orbit' Javascript slider, http://www.zurb.com/playground/orbit-jquery-image-slider, and I'd like to fire my own javascript at it to manually advance the slider left or right.
Basically, I'd like to fill it with my content, then have that content 'slide' in an out of view depending on a user interactions with the page as a whole, not only on a timer function or clicking a navigational image as already provided by the library.
So if I have a link named 'myLink', then something like this...
$('#myLink').click(function() {
... code to advance javascript slider...
$('#content').orbit(?????);
});
Failing that, my 'content' is going to be an html form and other similar stuff, anyone know a good free library that already does what I want?
Get a reference to the orbit object using "afterLoadComplete":
var myOrbit;
$(".orbitSlides").orbit({
afterLoadComplete: function() {
myOrbit = this;
}
});
Then use the 'shift' function to change slides:
myOrbit.shift(1);
or
myOrbit.shift('prev');
or
myOrbit.shift('next');
The easiest way would be
$(".slider-nav .right").click();
to simulate the arrow being clicked. Change if necessary to account for using the bullet-navigation option.
I don't think you're going to get anything more elegant than that, because the plugin doesn't expose an API of any sort - it's all privately closured up in the plugin.
I use this
$('#next').click(function(){
$('#rotator').trigger("orbit.next");
})
$('#prev').click(function(){
$('#rotator').trigger("orbit.prev");
})
assuming the div #rotator is the orbit slider.
I couldn't get some of these other answers to work. I know it's a little hacky but I found this easiest:
HTML:
<p id='back'>Back</p>
<p id='next'>Next</p>
CSS: (if you use the built-in navigation_arrows: false;, navigation arrows are removed and can no longer be manipulated, so visibility: hidden; to the rescue!)
.orbit-prev, .orbit-next {
visibility: hidden;
}
jQuery:
$('#back').on('click', function() {
$('.orbit-next').click();
});
$('#next').on('click', function() {
$('.orbit-prev').click();
});