http://jsfiddle.net/7m7uK/940/
This seems to work fine in the JSFiddle but not when i move it to the actual code/browser...it also doesn't work when I create a new jsfiddle. The sliding content only shows up covering the previous link so then can't close again
Anyone know what's up?
$('#loginPanel1').click(function () {
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide', {
direction: 'right'
}, 500);
} else {
$('#userNav').hide('slide', {
direction: 'right'
}, 500);
}
});
$('#loginPanel2').click(function () {
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide', {
direction: 'right'
}, 500);
} else {
$('#userNav').hide('slide', {
direction: 'right'
}, 500);
}
});
Ok try the following.
Make sure jquery.js is added
Make sure the jquery-ui.js is added
And wrap your code in $(function(){ });
That should be in i think.
Related
So I've setup a fancybox with boxslider.
I have some problems with the boxslider when opening the fancybox again after closing it the first time.
website (please note that the onclick is only applied to the first block (top row, most left))
The fancybox is called by the code below:
<div class="img-spacer" onclick="$.fancybox({href : '#portfolio-1', width: 1040, margin: 0, padding: 0, closeBtn: false}); $('.bxslider').bxSlider({auto: true,controls: false,pager: false});">
This code works just fine when opening the fancybox for the first time but when I close the fancybox and open it again the boxslider is not working anymore like it is supposed to. It will skip some photo's and won't slide smoothly.
Any suggestions on how to fix this?
Like I mentioned in my comment, you need to move the fancybox init out of the inline click handler, in into your JS file.
$(document).ready(function() {
// Attach fancybox to every .image-spacer div
$("img-spacer").fancybox({
href : '#portfolio-1',
width: 1040,
margin: 0,
padding: 0,
closeBtn: false,
onUpdate: function() {
alert('update!');
},
onCancel: function() {
alert('cancel!');
},
onPlayStart: function() {
alert('play start!');
},
onPlayEnd: function() {
alert('play end!');
},
beforeClose: function() {
alert('before close!');
},
afterClose: function() {
alert('after close!');
},
beforeShow: function() {
alert('before show!');
},
afterShow: function() {
alert('after show!');
},
beforeLoad: function() {
alert('before load!');
},
afterLoad: function() {
alert('after load!');
}
});
// On clicking a .img-spacer div, attach a bxSlider
$(".portfolio").click(function(){
$('.bxslider').bxSlider({
auto: true,
controls: false,
pager: false
});
});
});
And for the HTML
<div class="img-spacer"></div>
Give this a shot and let me know how it went. If you place it on the live site I can take a look at it there.
I'm slowly trying to slug my way through learning OOJS by building an accordion toggle and I'm having a hard time.
EDIT: Slowly getting there. I've got the toggle functioning how I want to. Unfortunately I'm calling the add / remove class incorrectly(?).
I'm currently calling it like:
accordion.ELEMENTS.TRIGGER.click(function() {
if ($(this).parent().hasClass(accordion.CLASSES.OPEN)){
$(this).parent().removeClass('open')
}
else {
$(this).parent().addClass('open');
}
});
And I would rather call it via the EVENTS.OPEN & EVENTS.CLOSE or even throw both of this into the EVENTS.BIND and have BIND sort out whether or not if it is open or not :
Here's a JSFiddle, I'm trying to bind the EVENTS.OPEN and EVENTS.CLOSE instead of trying to find the parents.
var accordion = {
ELEMENTS: {
HOME: $('.js-accordion-toggle'),
TRIGGER: $('.js-accordion-trigger'),
PANEL: $('.js-accordion-panel')
},
CLASSES: {
OPEN: 'open'
},
EVENTS: {
OPEN: function() {
if (ELEMENTS.HOME.hasClass(accordion.CLASSES.OPEN)) {
console.log(this + "open");
ELEMENTS.HOME.addClass(accordion.CLASSES.OPEN);
}
else {
console.log("this should close");
this.close();
}
},
CLOSE: function() {
accordion.ELEMENTS.HOME.removeClass(accordion.CLASSES.OPEN);
},
//BIND: function() {
// accordion.ELEMENTS.HOME.each(function() {
// accordion.EVENTS.OPEN();
// });
//}
},
fn: {
attachEvents: function() {
accordion.ELEMENTS.TRIGGER.click(function() {
console.log(this);
if ($(this).parent().hasClass(accordion.CLASSES.OPEN)){
$(this).parent().removeClass('open')
}
else {
$(this).parent().addClass('open');
}
});
}
},
init: function() {
accordion.fn.attachEvents();
}
}
accordion.init();
I managed to get your original fiddle to work by invoking accordion.init() after your object definition. I also had to replace your line 37 with accordion.ELEMENTS.PANEL.addClass(accordion.CLASSES.OPEN); to get rid of some undefined object error.
As for your new codes, you can simplify your codes by removing the if..else statement in line 19 and 22 with jQuery.toggleClass, to make it looks like:
$(this).closest(toggleHome).toggleClass(toggleClass);
I am using the plugin off of http://vegas.jaysalvat.com/documentation/slideshow/
The backgrounds are changing fine, but the overlay image is not working or rendering.
Here is my code I have in the head of the page:
<script>
$.vegas('slideshow', {
backgrounds:
[
{ src:'/../../images/backdrop.png' },
{ src:'/../../images/backdrop_yellow_trees.png' },
{ src:'/../../images/backdrop.png' }
]
})('overlay', {
src:'/../../assets/vegas/overlays/13.png'
});
</script>
Same problem here, but based on the #pawel reply over I came to this
$(function() {
$.vegas('slideshow', {
backgrounds:[
{ src:'images/pic1.jpg', fade:800 },
{ src:'images/pic2.jpg', fade:800 },
{ src:'images/pic3.jpg', fade:800 },
{ src:'images/pic4.jpg', fade:800 }
]
})('overlay', {
src:'vegas/overlays/15.png'
});
});
We probably made the same mistake, just copy paste from the documentation...
I've been fighting with this for a few hours now (I'm a bit new to js) and I decided to put it up to the community. I have this web app I'm building that is all based on percentages of screen sizes. The divs are fixed position, contents absolute within those divs. Here is the fiddle: http://jsfiddle.net/MycF6/31/ and the code I'm working with:
$(document)
.ready(function () {
$("#socialDash")
.click(function () {
$("#socialStream")
.hide("slide", {
direction: "left"
}, "1000");
});
});
$("#socialDash")
.click(function () {
$("#workBench")
.effect("scale", {
percent: 178,
origin: ['middle', 'right'],
direction: 'horizontal'
}, 700);
});
$("#niner")
.click(function () {
$("#socialStream")
.show("slide", {
direction: "left"
}, "1000");
$("#workBench")
.effect("scale", {
percent: 56,
origin: ['middle', 'right'],
direction: 'horizontal'
}, 500);
});
$(".socialButton")
.click(function () {
$("socialButton")
.removeClass(".clicked");
$(this)
.addClass(".clicked");
});
I want it so when I click the top button on the left (1) the left div of the inside content slides left and the div on the right expands to take its place. For the other two buttons (2),(3), I want the divs in original proportion. The other issue is when buttons (imgs) are clicked they have background that remains persistent instead of swapping to the next clicked button as I have tried to identify in that last bit of code.
Any help would be greatly appreciated. Thanks in advance!
Okay, I found a solution (basically I rewrote everything). It isn't pretty, but it works. Here is the new jfiddle: http://jsfiddle.net/MycF6/42/ if you are interested.
And the script:
$(document).ready(function () {
$("#dash").click(function () {
$("#stream").animate({
width: "0"
}, "fast").hide("slide", {
direction: "left"
}, "fast");
$("#dash").addClass("clicked");
$("#fb").removeClass("clicked");
$("#twit").removeClass("clicked");
$("#work").animate({
width: "100%"
}, "slow");
});
$("#twit").click(function () {
$("#work").animate({
width: "59%"
}, "fast");
$("#twit").addClass("clicked");
$("#dash").removeClass("clicked");
$("#fb").removeClass("clicked");
$("#stream").animate({
width: "40%"
}, "fast").show("slide", {
direction: "left"
}, "slow");
});
$("#fb").click(function () {
$("#work").animate({
width: "59%"
}, "fast");
$("#twit").removeClass("clicked");
$("#dash").removeClass("clicked");
$("#fb").addClass("clicked");
$("#stream").animate({
width: "40%"
}, "fast").show("slide", {
direction: "left"
}, "slow");
});
});
I would like to get the element that called the qtip popup. In the documentation here it lets you set the position. I want to set the position using a jquery selector like $(this).find('.icon'). The problem is that this isn't the element that called the qtip (I think it's window).
Does anyone know how I can get the handle that called it (like it would if I set target to false)?
Thanks.
In the qtip source code I found this:
if(config.position.target === false) config.position.target = $(this);
Here's the solution I came up with and it seems to work. There probably is a better way to do it if I modified the qtip script but I want to leave that alone.
$(".report-error").qtip(
{
content: 'test content',
position:
{
adjust:
{
screen: true
},
target: false, //it is changed in the 'beforeRender' part in api section. by leaving it as false here in the qtip it will set it as the position I need using $(this)
corner:
{
target: 'bottomMiddle',
tooltip: 'topRight'
}
},
show:
{
when:
{
event: 'click'
}
},
style:
{
name: 'cream',
tip:
{
corner: 'topRight'
},
padding: 0,
width: 400,
border:
{
radius: 5,
width: 0
}
},
hide:
{
when:
{
event: 'unfocus'
}
},
api:
{
beforeRender: function() { //get the position that qtip found with $(this) in it's script and change it using that as the start position
this.options.position.target = $(this.elements.target).find('.icon');
this.elements.target = this.options.position.target; //update this as well. I don't actually know what it's use is
}
}
});
It's working on the site now at http://wncba.co.uk/results/