I did have a look at this quesiton although I could work out how I could implement this.
The basic code overlay is:
jQuery.noConflict();
jQuery(document).ready(function($){
$("button").click(function(e){
popupOverlay();
popupDisplay();
e.preventDefault();
});
function popupOverlay() {
var overlayCss = {
"width" : $(document).width(),
"height" : $(document).height(),
"display" : 'block'
}
$("#popupOverlay").css(overlayCss);
}
function popupDisplay() {
var popup = $("#popup");
etc etc code to work out the central position for popup
$(popup).css({
'top': yPosition + 'px',
'left': xPosition + 'px',
'display' : 'block'
});
}
});
They above works fine, although I want to re-call the above function if the window is resized by adding this below the above:
jQuery(window).resize(function() {
popupOverlay();
popupDisplay();
});
Error I am getting is: popupOverlay is not defined
I have tried moving the popup functions out of the document ready but then I get the error: $ is not a function
I have to be really careful with this code that it does not cause any conflict with other JavaScript libraries that are already used on the website.
It does not work because the functions popupOverlay and popupDisplay are inside $(document).ready and you are trying to access it outside the scope of the declaration.
Rearrange your code like this.
jQuery.noConflict();
// DOM Ready event
jQuery(document).ready(function ($) {
$("button").click(function (e) {
popupOverlay();
popupDisplay();
e.preventDefault();
});
});
//window resize event
jQuery(window).resize(function () {
popupOverlay();
popupDisplay();
});
//custom functions
function popupOverlay() {
var overlayCss = {
"width": $(document).width(),
"height": $(document).height(),
"display": 'block'
}
jQuery("#popupOverlay").css(overlayCss);
}
function popupDisplay() {
var popup = jQuery("#popup");
//etc etc code to work out the central position
//for popup
jQuery(popup).css({
'top': yPosition + 'px',
'left': xPosition + 'px',
'display': 'block'
});
}
This should work.
jQuery.noConflict();
jQuery(document).ready(function(){
var $ = jQuery;
$("button").click(function(e){
popupOverlay();
popupDisplay();
e.preventDefault();
});
function popupOverlay() {
var overlayCss = {
"width" : $(document).width(),
"height" : $(document).height(),
"display" : 'block'
}
$("#popupOverlay").css(overlayCss);
}
function popupDisplay() {
var popup = $("#popup");
etc etc code to work out the central position for popup
$(popup).css({
'top': yPosition + 'px',
'left': xPosition + 'px',
'display' : 'block'
});
}
jQuery(window).resize(function() {
popupOverlay();
popupDisplay();
});
});
declare functions outside of document.ready()
no reason to declare them there,
the "not working" is due to the function belong other namespace
you can still use them if you will add handles to your events also in $(function() {});
Related
Here's my JS code:
$(window).scroll(function (event) {
var scrollTop = $(window).scrollTop();
var height = $(window).height();
var opacity = ((height - scrollTop) / height);
var scale = ((height - (scrollTop/10)) / height);
console.log(opacity);
if(opacity>=0.05){
$.each(links, function( i, link ) {
$(link).css({
'opacity': opacity,
});
})} else {
$(link).css({
'opacity': 0.05
});
}
if(scale>=0.9){
$('#index').css({
'transform': 'scale('+scale+')'
});
} else {
$('#index').css({
'transform': 'scale(0.9)'
});
}
});
$( document ).ready(function() {
$('#aboutContent').waypoint(function(direction) {
alert('hit!');
});
});
The .scroll() function works exactly as I want it but the waypoint doesn't at all. If however, I remove the .scroll() function the waypoint works as it should. Can anyone spot what could be causing the issue? I can't find any know conflicts between .scroll() and waypoints. Here's a JSFiddle: https://jsfiddle.net/zocdvefx/ If you remove the .scroll() function the waypoint should work.
Thanks!
Jamie
In your fiddle the issue is in this if-else block:
if (opacity >= 0.05) {
$.each(links, function(i, link) {
$(link).css({
'opacity': opacity,
});
})
} else {
$(link).css({ // <-- link is no longer in scope and is undefined
'opacity': 0.05
});
}
Changing link to links in the line I highlighted above will resolve your issue.
For future reference always check your browser's developer console (usually F12) when you're running into an issue. As soon as I opened it in your jsfiddle it immediately started telling me what the issue was: ReferenceError: link is not defined.
I am having an issue with my slideToggle function. Once pressed it opens up the way I need it to. But when I scale the browser to test the responsive flow to the site the slideToggle still stays active instead of sliding down. I tried a few functions but nothing seems to work. Below is the scrip I am using without the code to slide down when it hits a specific screen resoultion. How would I go about fixing this issue?
$('#more').click(function () {
var open = $('header').is('.open');
$('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=120' }, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('#footerPanel').slideUp(400);
}
});
$('.footerButton').click(function () {
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
My Code
http://jsfiddle.net/wyze/XqUp4/4/
Try if this works for you. I have added to check whether the width is 780(you can change it), when the panel to slide down. Try adding this in you fiddle and check if this works
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#footerPanel').slideToggle(400);
}
}
});
I am a newbie to javascript and I am trying to make an onclick dropdown menu.
I want it to look like this:
http://www.instantshift.com/demo/dropdown_menu/
But this is mouseenter/mouseleave (in other words, hover) whereas I would like it to be onclick. How do I change this code to make it onclick?
Also can you please provide me the jquery for the onclick?
My current code for the hover (mouseenter/mouseleave menu) is the following:
$(function(){
$('.dropdown').mouseenter(function(){
$('.sublinks').stop(false, true).hide();
var submenu = $(this).parent().next();
submenu.css({
position:'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex:1000
});
submenu.stop().slideDown(300);
submenu.mouseleave(function(){
$(this).slideUp(300);
});
});
});
</script>
Once again, I would like to change this to onclick.
Thanks.
I think that you can just trigger the menu with a click, and then any other click will close it.
So, simple modification:
$(function() {
$('.dropdown').click(function() {
$('.sublinks').stop(false, true).hide();
var submenu = $(this).parent().next();
submenu.css({
position: 'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex: 1000
});
submenu.stop().slideDown(300);
//click anywhere outside the menu
$(document).click(function() {
var $el = $(this);
$el.not('.dropdown') && $el.slideUp(300);
});
});
});
Substitute
$('.dropdown').mouseenter(function(){
with
$('.dropdown').click(function(){
I want to implement a Jquery/JS animation like the Flipboard popup animation.
When user clicks on an image, the image will expand to a certain size and its white background expands until it occupies the whole screen.
Once the animation is done the page content will be loaded.
http://flipboard.com/
Any help regarding this will be appreciated.
Thanks a lot!
Codrops did it a few months back, I can't really write out all the code for you here but give this article a read.
<script>
//Finally I found the answer. This is the full code.
$(document).ready(function() {
$('.box').click(function(e){
if( $('div').hasClass('overlay')==false ){
//event.preventDefault();
var $box = $(this);
$('<div class="overlay"></div>').prependTo($box);
var $overlay = $('.overlay');
$overlay.css( {
'position' : 'absolute',
'background-color' : 'white',
'width' : $box.outerWidth(true),
'height' : $box.outerHeight(true),
'left' : $box.offset().left,
'top' : $box.offset().top,
'z-index' : 99999999
});
//$($placeholder).insertAfter('.box');
$overlay.animate({
width: $(document).width(),
height: $(document).height(),
left: '0px',
top: '0px'
}, 500, function() {
//reset the overlay
$overlay.css({'width': ''});
$overlay.css({'height': '1500px'});
//ajax
$.ajax({
type: "POST",
url: "../ajax/get_event.php",
data: "firstname=clint&lastname=eastwood",
success: function(resp){
// we have the response
$overlay.html(resp);
$('.window').fadeIn(200);
},
error: function(e){
alert('Error: ' + e);
}
});
});
}else{
//click only on overlay to exit
var $target = $(e.target);
if ( $target.is('.overlay') ) {
$('.overlay').remove();
}
}
});//end box click
});//end of jquery
</script>
Codrops have just posted a plugin to do this, and instructions on how to use it. Theres a particularly cool demo of the plugin here.
I am having trouble figuring this one out, can anyone help please?
I'm not sure if it's even possible, I need to refresh/reset the variable as I need to keep it's scope for other functions, so it can be used globally.
I have this variable near the top of my jquery goodness...
var heightOne = $panelOne.height();
and I'm trying to refresh it when my ajax gravity form sends.
I have this binded function which will fire when the form has fulled reloaded, So I guess I can put my variable refresh/reset script inside here...
$(document).bind('gform_post_render', function(){
// variable refresh code in here...
$slidePane.css({ 'height' : heightOne + 'px' }); // then this will follow and use new height taken from $panelOne updated variable
});
But I'm struggling to find out where to start. Any help would be awesome thanks.
UPDATE
This is my script in full, to show you what I'm trying achieve.
$(window).load(function(){
var $slidePane = $("#sliding-pane"),
$stageOne = $("#nav-stage-1"),
$stageTwo = $("#nav-stage-2"),
$stageThree = $("#nav-stage-3"),
heightOne = $("#panel-stage-1").height(),
heightTwo = $("#panel-stage-2").height(),
heightThree = $("#panel-stage-3").height();
$slidePane.css({ 'height' : heightOne + 'px' });
$.fn.slideThree = function() {
$slidePane.stop().animate({
left : "0px",
height : heightOne + 'px'
}, 300);
FB.Canvas.scrollTo(0, 510);
};
$.fn.slideThree = function() {
$slidePane.stop().animate({
left : "-680px",
height : heightTwo + 'px'
}, 300);
FB.Canvas.scrollTo(0, 510);
};
$.fn.slideThree = function() {
$slidePane.stop().animate({
left : "-1360px",
height : heightThree + 'px'
}, 300);
FB.Canvas.scrollTo(0, 510);
};
$stageOne.on('click', function () {
$(this).slideOne();
});
$stageTwo.on('click', function () {
$(this).slideTwo();
});
$stageThree.on('click', function () {
$(this).slideThree();
});
$(document).bind('gform_post_render', function(){
$slidePane.css({ 'height' : heightThree + 'px' });
});
});
I'd recommend you put overflow:hidden in the css of the slidePane; that way the dimensions will resize automatically. You shouldn't need jquery for this.
var $slidePane = $("#sliding-pane"),
/* ...other vars... */
heightThree = $("#panel-stage-3").height();
// Cache the height
$('#panel-stage-3').data('origHeight', heightThree);
$(document).bind('gform_post_render', function(){
$slidePane.css({ 'height' : $('#panel-stage-3').data('origHeight') + 'px' });
});