Search jQuery

jQuery Forum

Screen name:
718bklynqns
About Me:
I am new to the Front End Developing world. My goals are getting better with JavaScript, JQuery and JQueryMobile!

718bklynqns's Profile

15 Posts

20 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Why can't I hook the bind method to this class?
[0Replies]
- 21-Oct-2013 07:51 PM
- Forum: Using jQuery Plugins
I am trying to refresh the browser when the user clicks a close button (which is labeled
.ps-toolbar-close), but I get zilch.
1. $(document).ready(function(){
  $(".ps-toolbar-close").bind("click", function() {
  location.reload();
  });
  });
This is the backstory; I have a page which has a long vertical image gallery, so I am using scrollUp to quickly navigate back to the top.

http://aortiz.info/mirophotography/wedding_page.html
I am using a plugin called scrollUp and it has this great 'destroy' method which kills it; So basically I want to restart it but only after the user hits a certain button.

I figure refreshing/reloading the browser is a neat way to restart the plugin.
I am doing this because there's ***another*** plugin that scrollUp is not playing nice with...the other plugin is photoswipe...

Any insight would be appreciated, as this is driving me to drink (beyond my normal intake).
j/k...

My html;
1. <ul class="galleryContainer gallery">
  
  <li>
  <a href="images/galleryImages/full/001.jpg" rel="external">
  <img src="images/galleryImages/thumb/001.jpg" alt="Image 001" class="destroy">
  </a>
  </li>
  <li>
  <a href="images/galleryImages/full/002.jpg" rel="external">
  <img src="images/galleryImages/thumb/002.jpg" alt="Image 002" class="destroy">
  </a>
  </li>
  <li>
  <a href="images/galleryImages/full/003.jpg" rel="external">
  <img src="images/galleryImages/thumb/003.jpg" alt="Image 003" class="destroy">
  </a>
  </li>
  </ul>
:)

Getting a method (scrollUp or photoswipe) to fresh itself in jQuery
[0Replies]
- 19-Oct-2013 08:32 AM
- Forum: Using jQuery
I have a page which has a long vertical image gallery, so I am using scrollUp to quickly navigate back to the top.
http://aortiz.info/mirophotography/wedding_page.html
However my problem is when I click through the gallery the scrollUp continues to exist.
I tried to attach this 'destroy' method to the thumbnail, (thinking that would kill the scrollUp method) and then add a browser refresh to the 'close' button in the gallery... Which would refresh my browser to reset the scrollUp plugin...However that doesn't work! Any help would be great!
// Destroy example
```
 $(function(){ $('.destroy').click(function(){ $.scrollUp.destroy(); }) }); $('.closeButton').click(function(){ location.reload(); });
```

How do I get Flexslider2 to stop jumping?
[0Replies]
- 29-Sep-2013 09:36 AM
- Forum: Using jQuery Plugins
I am using Flexslider2 (http://flexslider.woothemes.com/thumbnail-controlnav.html)
and get this weird jumping effect within my project; Basically it cycles through and the frame collapses like in the image below. My linked .js files and the flex script are right before the closing body tag. Also no errors from chrome dev tools.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/lib/jquery.easing.min.js"></script>
<script defer src="js/jquery.mousewheel.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>

And this is the only piece of css I changed to fit my parameters. Any help would be swell!

.flexslider { margin: 0 auto 60px; max-width: 740px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; max-width: 740px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

hide() and show() on mouseleave or mouseout
[2Replies]
- 10-Apr-2013 03:00 PM
- Forum: Using jQuery
I am using hint.css and would like to have the tip hide when the div/class is clicked
and turned on when the use mouses out of the div/class. I thought what I have here was pretty straight forward. I am surprised it didn't work, what am I missing?

Thanks!
2. <div class="promo">
3. <div class="offer hint--top hint--info hint--rounded hint--info" data-hint="PUT SOME COOL COPY, TO GET PEOPLE TO CLICK!!!"></div>
4. </div>
7. $(document).ready(function() {
8. $( '.promo' ).on('click','.offer', function(){
9. $(this).hide();
10. });
11. $( '.promo' ).on('mouseleave','.offer', function(){
12. $(this).show();
13. });
14. }); //end of document ready

jQuery Retina Display Plugin not working
[1Reply]
- 10-Nov-2012 12:56 PM
- Forum: Using jQuery Plugins
I followed the installation instructions but I am not getting any changes on my IOS simulator or my live device (iphone 4S).

http://troymcilvena.com/post/998277515/jquery-retina

I am actually making a responsive version for mobile here,
My navigation is in a ul, li controlled by css, I don't have an image tags in my html is that why?
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <meta name="viewport" content="width=device-width,initial-scale=1">
6. <meta name="apple-mobile-web-app-capable" content="yes" >
8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
11. 
12. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
14. 
15. <script type="text/javascript" src="_js/basic-jquery-slider.js"></script>
18. <script>window.jQuery || document.write('<script src="_js/jquery-1.8.2.min.js"><\/script>')</script>
19. <script type="text/javascript" src="_js/jquery.retina.js" ></script>
21. 
22. <script>
23. var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
24. (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
25. g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
26. s.parentNode.insertBefore(g,s)}(document,'script'));
27. </script>
29. <link rel="stylesheet" href="../stylesheets/basic-jquery-slider.css">
31. <link rel="stylesheet" href="../stylesheets/normalize.css">
32. <link rel="stylesheet" href="../stylesheets/fonts.css">
34. <link rel="stylesheet" href="../stylesheets/main.css" >
35. <link rel="stylesheet" href="../stylesheets/iphone.css" />
39. <script type="text/javascript">
40. $(document).ready(function() {
41. // slider
42. $('#banner').bjqs({
43. 'animation' : 'slide',
44. 'width' : 700,
45. 'height' : 300
46. });
47. // jquery-retina display plugin
48. $('img').retina();
50. });
51. </script>
52. </head>
54. <body>
57. 
61. <header>
62. <ul id="mobileTop">
63. <a name="mobileTopMenu"></a>
64. <li class="smoothScroll"><a href="#mobile" id="home" class="mobile_nav-nav_sprite" ><em>work</em></a></li>
65. <li class="smoothScroll"><a href="#mobilefaq" id="faq" class="mobile_nav-nav_sprite"><em>faq</em></a></li>
66. <li><a href="mailto:barbara_pav@hotmail.com?subject=Speech-Language Inquiry" id="email" class="mobile_nav-nav_sprite "><em>contact</em></a></li>
67. </ul>
68. </header>
71. <div id="wrapper">
72. <div id="scroll-content">
73. <section id="mobilehomeContent">
74. <a name="mobile"></a>
75. <h2>What is speech therapy?</h2>
76. <p>
77. Keytar seitan next level, bushwick mcsweeney's jean shorts quinoa blog aesthetic forage mlkshk +1 keffiyeh lo-fi ethnic. Fanny pack mcsweeney's tattooed, cred wolf food truck lomo trust fund swag fap. Pop-up flexitarian etsy, before they sold out vice beard ennui brooklyn synth sustainable typewriter.
78. </p>
79. </section>
81. <section id="mobilefaqContent" >
82. <a name="mobilefaq"></a>
83. <h2>Frequently asked questions?</h2>
84. <ul class="mobilefaqlist">
85. <li>When a parent should seek speech therapy?</li>
86. <li>How do I know if my child has delayed speech language skills?</li>
87. <li>How do I know if I should look for a speech-language therapist.</li>
88. <li>Keytar seitan next level, bushwick mcsweeney's jean shorts quinoa?</li>
90. </ul> 
91. </section>
92. </div> 
93. </div> 
95. <footer>
96. <ul id="mobileBottom">
97. <li><a href="http://www.linkedin.com/pub/barbara-pavicevac/2b/56a/434" target="_blank" id="linkedin" class="mobile_nav-nav_sprite"><em>linkedin</em></a></li>
98. <li><a href="https://twitter.com/Babspav" target="_blank" id="twitter" class="mobile_nav-nav_sprite"><em>twitter</em></a></li>
99. <li><a href="http://www.facebook.com/groups/108100642565490/?fref=ts" target="_blank" id="facebook" class="mobile_nav-nav_sprite"><em>facebook</em></a></li>
100. </ul>
101. </footer>

Rebind a unbind click
[7Replies]
- 01-Oct-2012 11:05 AM
- Forum: Using jQuery
Hey all,
I am using this library that allows you to create a more elegant alert box (you can even use images!);
I used it with a click function and it works! A nice container opens with a close button, GREAT!
I noticed if you happen to click more than once on the link you assigned, it keeps firing. So multiple images begin to propagate. I used the unbind method, but it cancels the link permanently (until refresh etc.).

I was surprised to see the library doesn't compensate for this little problem, so I am wondering if you could rebind the click when you close the image window so it starts from the beginning.
1. $(".shopFrag").click(function(){
2. Messi.img("_images/wishlist.jpg");
3. $(".shopFrag").unbind('click');
4. });

Stoping setInterval
[4Replies]
- 24-Sep-2012 02:08 PM
- Forum: Getting Started
I am new to javaScript and wondering if anyone can share some insight. I am playing around with "ID's" trying to get comfortable and such. I know jQuery has a really quick solution, but I want to know how to do it via js. PLEASE HELP!
3. function startTimer(){
4. var n = 0;
5. var e = document.getElementById("output");
6. var myTimer = setInterval (function() {e.innerHTML = n++;},100);
7. // clearInterval(myTimer);
8. if(myTimer === 10){
9. clearInterval(myTimer);
10. return;
13. }
14. }
20. startTimer();

jQuery and svg files
[3Replies]
- 08-Sep-2012 06:29 PM
- Forum: Using jQuery
Hi all,
I am developing a website and want to implement svg files to help in regards to retina displays, but want a fall back png file as a back up.
This is the html/js;
3. <div id="band">
4. </div> 
6. <script>
7. $(document).ready(function() {
8. if (Modernizr.inlinesvg) {
9. //SVG.
10. $('#band').html('<img src="barbGradient.svg" />');
11. } else {
12. //No SVG.
13. $('#band').html('<img src="barbGradient.png" />');
14. }
15. });
16. </script>
this is the css:
2. }
4. .no-inlinesvg div#band {
5. position: relative;
6. top: -950px;
7. background-repeat: repeat-x;
8. background-image: url('../_images/barbGradient.png');
9. z-index: -1;
11. }
13. .inlinesvg div#band {
14. position: relative;
15. top: -950px;
16. background-repeat: repeat-x;
17. background-image: url('../_images/barbGradient.svg');
18. z-index: -1;
19. }
All the browsers are rendering horribly! I know I can include two pngs at different resolution, but I find the js method to be smarter! Any help would be appreciated!

Problem with "switch case!"
[5Replies]
- 08-May-2012 06:07 PM
- Forum: Getting Started
I am trying to write a script that will detect the a persons browser version.
Basically, if they have an old browser the script will serve up a homemade alert, that will direct them to a link to update their browser.
So I wrapped it an anonymous function like so, using a switch statement. I only did one to see if would even recognize it...And it doesn't. I know there's a controversy over browser detection but I am new to javascript and just trying to get some practical uses to understand the language better...
2. $(function(){
3. var browser = navigator.userAgent;
4. switch(browser.indexOf("Firefox/12") {
5. case "Firefox/12":
6. $('#browserDetectcontainer').load('browserUpdate.html #browserDetect');
8. $("#browserDetectcontainer").on("click",".close",function(){
9. $("#browserDetectcontainer").empty();
10. return false;
11. }); // end browserDetecter
12. break;
14. });// end of document ready
Any help would be great!

Anonymous function not working.
[3Replies]
- 07-May-2012 07:19 PM
- Forum: Getting Started
I am trying to write a script that will detect the a persons browser version.
Basically, if they have an old browser the script will serve up a homemade alert, that will direct them to a link to update their browser.
So I wrapped it an anonymous function like so, using a switch statement. I only did one to see if would even recognize it...And it doesn't.
2. $(document).ready(function() {
4. $(function(){
5. var browser = navigator.userAgent;
6. switch ( browser.indexOf() !==-1) {
7. case 'Firefox/12':
8. $('#browserDetectcontainer').load('browserUpdate.html #browserDetect');
10. $("#browserDetectcontainer").on("click",".close",function(){
11. $("#browserDetectcontainer").empty();
12. return false;
13. }); // end browserDetecter
14. break;
16. }
18. });
20. });// end of document ready
Any help would be fantastic!

Converting javaScript to Jquery; specifically toString().indexOf()
[9Replies]
- 27-Apr-2012 11:15 AM
- Forum: Getting Started
I am new to javaScript and jQuery, while learning I am actively taking the former and trying to write in the later.
This function will check if the links on the page are linking internally or linking outside
the site. If they're going outside the site, it will render an alert to the user.
So the javaScript here works, I am having problems with converting the methods to JQuery..
Any help would be appreciated!
2. // javaScript:
3. window.onload = initAll;
5. function initAll(){
6. document.getElementById("redirect").onclick = clickHandler;
8. }
10. function clickHandler(){
11. if(this.toString().indexOf("index")< 0){
12. alert("we are not responsible for the content of pages outside our site!");
13. }
14. }
16. //jQuery
17. $(document).ready(function(){
21. $("#redirect").click(function(){
22. function clickHandler(){
23. if(this.toString().index("index")< 0){
24. alert("we are not responsible for the content of pages outside our site!");
25. }
27. });

I understand "for loops," but hopefully a seasoned javaScript programmer can answer this...
[10Replies]
- 07-Apr-2012 03:55 PM
- Forum: Getting Started
I was reviewing some basics and came across the factorial example and changed the loop in my editor to make sure I understood what was going on couldn't believe I was stumped in a way!
I understand the code block below will continue to execute as long as the condition is true
("i is less then 10"). In that case, "i" (which let's say at this point is "3", because it's gone through the third iteration at this point) is multiplied by "fact."
Which would result in 3, because fact was set by the global variable to one "1", and "i" is now "3." So, fact * 1 would be 3 and then 3 is set to the variable fact.
Then when the document.write(i + fact + ""); fires to print out to the page, you get "9!"
I know here, "i" is set to "3" and is supposed to be concatenated with the variable fact,
which I thought is "3."Shouldn't it be six?
Thanks, any help would be appreciated. Keep in mind I was terrible at math and was a illustration major! Sorry for the newbie question!

<script> var fact = 1; for(i = 1; i < 10; i++){ fact = fact*i; document.write(i + fact + "</br>"); } </script>

outputs in html:
2
4
9
28
125
726
5047
40328
362889

Why does my JQuery Mobile web app look pixelated in the iPhone retina simulator?
[4Replies]
- 05-Apr-2012 03:07 PM
- Forum: jQuery Mobile
Recently started using the JQueryMobile framework to make a web app version of my site...http://aortiz.info
While things together using the IOS simulator and trying to accommodate for a retina version (iPhone version 5.0), I started noticing pixelation. See below!
I found a great tutorial about the matter and downloaded the source to test in my development environment http://aralbalkan.com/3331. That worked, so I guess it's my markup/css?
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <title>welcome</title>
7. 
8. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
10. 
11. <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
12. <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
14. 
15. <script src="_js/jquery.mobile.structure-1.0.1.min.css"></script>
16. <script src="_js/jquery.mobile-1.0.1.min.css"></script>
19. <link href="_css/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css"/>
21. <link href="_css/retina.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)">
23. <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
25. 
26. 
29. </head>
This my CSS:
2. /* Retina */
3. @media screen and (-webkit-min-device-pixel-ratio: 2.0),
4. only screen and (-o-min-device-pixel-ratio: 3/2),
5. only screen and (min--moz-device-pixel-ratio: 1.5),
6. only screen and (min-device-pixel-ratio: 1.5) {
8. div#crest {
9. margin-left: auto;
10. margin-right: auto;
11. background:url('../_images/crestButton@2x.png')no-repeat;
12. -webkit-background-size: 80px 79px;
13. z-index: 1999;
14. }
16. body{
17. border-bottom: 1px solid #c48d73;
18. padding: 0;
19. margin:0;
20. padding:0px;
21. background:url('../_images/aortiz_bg@2x.png');
22. background-repeat: no-repeat;
23. border: 1px solid #050201;
24. width: auto;
25. -webkit-background-size: 1271px 920px;
27. }
29. }
33. @media screen and (device-width:768px) and (orientation:portrait){
34. body{
35. border-bottom: 1px solid #c48d73;
36. padding: 0;
37. margin:0;
38. padding:0px;
39. background:url('../_images/aortiz_bg@2x.png');
40. background-repeat: no-repeat;
41. border: 1px solid #050201;
42. width: auto;
43. -webkit-background-size: 1271px 920px;
45. }
47. }
49. @media screen and (device-width:768px) and (orientation:landscape){
50. body{
51. padding: 0;
52. margin:0;
53. padding:0px;
54. background:url('../_images/aortiz_bg@2x.png');
55. background-repeat: no-repeat;
56. border: 1px solid #050201;
57. width: auto;
58. -webkit-background-size: 1271px 920px;
60. }
61. }
I attached a screen shot of the simulator, thanks in advance!
Attachments
- iOS Simulator Screen shot Apr 5, 2012 10.34.28 AM.png
  
  Size: 172.64 KB Downloads: 1643

Ajax load function
[3Replies]
- 03-Mar-2012 07:33 PM
- Forum: Getting Started
Hi all,

I am using a great tutorial from lynda.com that describes how to use ajax to create a preloaded and to load a portion of a div from one page to another page. The funny thing is the demo/exercise works but what I transposed and reworked for my kind or worked while I was working it out, but now doesn't work at all. Could it be my Mamp environment? What's weird is the slider and other Jquery elements work fine...

Below is the function...and here is my site http://updatedaortiz.aortiz.info/index.php

// remap jQuery to $
(function($){})(window.jQuery);

/* trigger when page is ready */
$(document).ready(function (){
initialize();
});

function initialize() {
//Click on nav to load external content through AJAX
$('#menu_container a').click(function(e){
e.preventDefault();
$('<div></div>').attr('id', 'animatedStars').appendTo('#content'); //spinner
$('#content').load( e.target.href + ' #loadContent', function() { //stop spinner
}); //pages finished loading
}); //clicked on nav
----------------------- //add fadespinner function

//fade spinner graphic
function fadespinner() {
$('#animatedStars').fadeOut('slow', function() { //stop spinner
$(this).remove();
}); //remove spinner
}

load() function
[1Reply]
- 01-Mar-2012 04:19 PM
- Forum: Getting Started
Howdy all,

I am semi-new to javaScript and JQuery; And while learning etc. I am redoing my website.
Anyway, I am really exciting about ajax and what it can do.
However when I use the load() function to get content from another page to place that content on my index.php page, I get a total mess.

This is a link to my site so far.
http://updatedaortiz.aortiz.info/index.php

<script>
$(document).ready(function() {

$('#menuContainer a').click(function(){
var url = $(this).attr('href');
$('#placedContent').load(url + '#pageContent');
return false;
}); //end click function

}); //end document.ready function

</script>

From what I understand after the document ready, the code redirects the respective links (#menuContainer a) to take content from '#pageContent div to the '#placedContent' div. I used the load() function for the index/home page (which is blank, it's supposed to be for now..) and the graphics and web design page as a test..
Thanks in advance, any input would be appreciated!

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend