Loading...

Search jQuery

Search

jQuery Forum

Screen name:
caseybaggz
About Me:
Front-End Dev trying to become a javascript/jQuery master.
Email ID: casey@mindhandle.com

caseybaggz's Profile

5 Posts

16 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

window resize hover animation
[2Replies]
- 06-Jul-2014 02:47 PM
- Forum: Using jQuery
Hello!
I'm trying to create a custom responsive accordion menu that animates when you hover over it, but when sized down to mobile, changes to a clickable grid.

I think I have the majority of the work done, but cannot seem to nail the window.resize() handler. I feel like I need a way to stop the resize handler from calling, once the if statement is met. But, I'm not a jQuery master, thus I am having trouble figuring out how to properly write the syntax.

You can find a link to the example here:
http://caseybaggz.com/CB-2.0/sites.php

And this is the code (also at the bottom of the html):

<script>
var $li = $('.accordion li'),
$width = $(window).width();

$(function() {

if($width >= 640) {
$li.hover(function() {
$(this).next().animate({marginLeft: "0"});
}, function() {
$(this).next().animate({marginLeft: "-15.5%"});
});
} else {
$li.stop(true, false);
$li.css({marginLeft: "0"});
};

$(window).resize(function() {
var $newWidth = $(window).width();

if($newWidth <= 640) {
$li.css({marginLeft: "0"});
$li.off();
$(window).off('resize');
} else if ($newWidth > 640) {
$li.css({marginLeft: "-15.5%"});
$li.hover(function() {
$(this).next().animate({marginLeft: "0"});
},
function() {
$(this).next().animate({marginLeft: "-15.5%"});
});
$(window).off('resize');
}
});

});
</script>

Many thanks in advance!
Casey Baggz

lightBox effect help
[8Replies]
- 20-Nov-2013 03:46 PM
- Forum: Using jQuery
Hey guys and gals,
I am working on a lightbox effect for this page that has multiple modals, that is currently not working. I am still new to jQuery, so bear with me. I think the code is almost there, but I'm still not getting the syntax correct. Here is a link to the page:

http://mindhandle.com/umc/connect.php#

Also, the code is minified, so here is the original .js file:
2. $(function() {
4. /* Initiate lightbox for single modal---------
5. $('.triggle').on('click', function(e) {
6. e.preventDefault();
7. $('div.modal').fadeIn(400);
8. $('.overlay').fadeIn(400);
9. }); */
11. // Open modal triggered by specific anchor
12. $('div.triggle').on('click', function(e) {
13. e.preventDefault();
14. var id = $(this).data('id');
16. $('div.modal').data('id' === $(id)).fadeIn(400);
17. $('div.overlay').fadeIn(400);
19. });
21. // Close Modal Window
22. $('a.close').on('click', function(e) {
23. e.preventDefault();
24. $('.modal').fadeOut(800);
25. $('.overlay').fadeOut(800);
26. });
28. });
So, my goal is to match the modal (using the data attar) with whatever anchor is selected. Any help is welcome.

Thanks so much!

Casey Baggz

if/else conditional problems
[6Replies]
- 13-Nov-2013 12:00 PM
- Forum: Using jQuery
Hey guys and gals,
Does anyone know why my conditional is not working on the sub-pages? The desktop version works fine (when you click on the nav links, it brings up the index page, animates, then takes you to the linked page), but the tablet and phone versions are not supposed to animate, but go straight to the page?

To my eye everything looks fine? HELP!

http://www.mindhandle.com/umc/connect.php

Since the jQuery is minified, here is the code for the sub-pages:

$(document).ready(function() {

var button = $('nav ul').children().find('a');

if (document.width <= 768) {

$.ajax(button.click(function() {
$(this).abort();
}));

} else {

$.ajax(button.click(function(e){
e.preventDefault();
var linkLocation = this.href;
var pos = $(this).data('pos');
$('html').load("index.php", function(data){
$(this).find('div.bg img, div nav ul#mainNav').animate(pos, 500);
cache: false,
$('html').delay(900).fadeOut(1500, function redirect(){
location = linkLocation;
});
});
}));

$(window).on('pageshow',function(){
$("div.bg img, div nav ul#mainNav, body").removeAttr('style');
});
}
});

Casey Baggz

Recognizing coming from one page and animating.
[12Replies]
- 10-Apr-2013 04:06 PM
- Forum: Using jQuery
So, I have a index page that moves like a slide show when you click a nav link, then sends you to the page. I am trying to figure out how to go from that pages nav links (when clicked), back to the index to automatically play a slide animation, then redirect to the original link intended.

This is kind of funky for me because it is going from one page-to another-to another.

SO IN REALITY, I need help trying to make this thought come to life in my jQuery. I already have the reDirect set up, so it's trying to figure out the index code now to complete it:

Maybe something like this? And if so, HOW DO I DO IT?! lol

if { coming from #connect.php, automatically animate to this location in the slide show, then redirect to #this.php} else {do nothing}

Anybody? Thanks in advance.

Casey Baggz

page reDirection into animation Question
[2Replies]
- 09-Apr-2013 04:06 PM
- Forum: Using jQuery
So, I have some one who wants to leave one page by clicking a tab, and causing the site to automatically go back to the index page and play a scrolling animation on a one img slide show to a new location, before following through with the redirect to the original page the tab that was clicked was meant for.

Is this possible?

Here is a reference of the site. The index plays the animation, then goes to a page, which then goes to other pages similar. They want to go back to the index and mimic the animation to a new location before going to the actual page clicked.

http://mindhandle.com/UMCsite_v2/

thanks!

Casey Baggz

«Prev
Next »