- 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
Show:
- Expanded view
- List view
Private Message
- 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.- $(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.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;- <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>
:)- 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(); });
- 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; }- 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!
- <div class="promo">
- <div class="offer hint--top hint--info hint--rounded hint--info" data-hint="PUT SOME COOL COPY, TO GET PEOPLE TO CLICK!!!"></div>
- </div>
- $(document).ready(function() {
- $( '.promo' ).on('click','.offer', function(){
- $(this).hide();
- });
- $( '.promo' ).on('mouseleave','.offer', function(){
- $(this).show();
- });
- }); //end of document ready
- I followed the installation instructions but I am not getting any changes on my IOS simulator or my live device (iphone 4S).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?
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <meta name="apple-mobile-web-app-capable" content="yes" >
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <!-- The jQuery library (CDN) -->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
- <!-- Include the plugin *after* the jQuery library -->
- <script type="text/javascript" src="_js/basic-jquery-slider.js"></script>
- <script>window.jQuery || document.write('<script src="_js/jquery-1.8.2.min.js"><\/script>')</script>
- <script type="text/javascript" src="_js/jquery.retina.js" ></script>
- <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
- <script>
- var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
- (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
- g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
- s.parentNode.insertBefore(g,s)}(document,'script'));
- </script>
- <link rel="stylesheet" href="../stylesheets/basic-jquery-slider.css">
- <link rel="stylesheet" href="../stylesheets/normalize.css">
- <link rel="stylesheet" href="../stylesheets/fonts.css">
- <link rel="stylesheet" href="../stylesheets/main.css" >
- <link rel="stylesheet" href="../stylesheets/iphone.css" />
- <script type="text/javascript">
- $(document).ready(function() {
- // slider
- $('#banner').bjqs({
- 'animation' : 'slide',
- 'width' : 700,
- 'height' : 300
- });
- // jquery-retina display plugin
- $('img').retina();
- });
- </script>
- </head>
- <body>
- <!--[if lt IE 7]>
- <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
- <![endif]-->
- <header>
- <ul id="mobileTop">
- <a name="mobileTopMenu"></a>
- <li class="smoothScroll"><a href="#mobile" id="home" class="mobile_nav-nav_sprite" ><em>work</em></a></li>
- <li class="smoothScroll"><a href="#mobilefaq" id="faq" class="mobile_nav-nav_sprite"><em>faq</em></a></li>
- <li><a href="mailto:barbara_pav@hotmail.com?subject=Speech-Language Inquiry" id="email" class="mobile_nav-nav_sprite "><em>contact</em></a></li>
- </ul>
- </header>
- <div id="wrapper">
- <div id="scroll-content">
- <section id="mobilehomeContent">
- <a name="mobile"></a>
- <h2>What is speech therapy?</h2>
- <p>
- 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.
- </p>
- </section><!-- homeContent-->
- <section id="mobilefaqContent" >
- <a name="mobilefaq"></a>
- <h2>Frequently asked questions?</h2>
- <ul class="mobilefaqlist">
- <li>When a parent should seek speech therapy?</li>
- <li>How do I know if my child has delayed speech language skills?</li>
- <li>How do I know if I should look for a speech-language therapist.</li>
- <li>Keytar seitan next level, bushwick mcsweeney's jean shorts quinoa?</li>
- </ul> <!-- faqlist-->
- </section><!-- faqContent-->
- </div> <!-- scroll-content-->
- </div> <!-- wrapper-->
- <footer>
- <ul id="mobileBottom">
- <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>
- <li><a href="https://twitter.com/Babspav" target="_blank" id="twitter" class="mobile_nav-nav_sprite"><em>twitter</em></a></li>
- <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>
- </ul>
- </footer>
- 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.
- $(".shopFrag").click(function(){
- Messi.img("_images/wishlist.jpg");
- $(".shopFrag").unbind('click');
- });
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!
- function startTimer(){
- var n = 0;
- var e = document.getElementById("output");
- var myTimer = setInterval (function() {e.innerHTML = n++;},100);
- // clearInterval(myTimer);
- if(myTimer === 10){
- clearInterval(myTimer);
- return;
- }
- }
- startTimer();
- 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;
- <div id="band">
- </div> <!--band-->
- <script>
- $(document).ready(function() {
- if (Modernizr.inlinesvg) {
- //SVG.
- $('#band').html('<img src="barbGradient.svg" />');
- } else {
- //No SVG.
- $('#band').html('<img src="barbGradient.png" />');
- }
- });
- </script>
- }
- .no-inlinesvg div#band {
- position: relative;
- top: -950px;
- background-repeat: repeat-x;
- background-image: url('../_images/barbGradient.png');
- z-index: -1;
- }
- .inlinesvg div#band {
- position: relative;
- top: -950px;
- background-repeat: repeat-x;
- background-image: url('../_images/barbGradient.svg');
- z-index: -1;
- }
- 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...
- $(function(){
- var browser = navigator.userAgent;
- switch(browser.indexOf("Firefox/12") {
- case "Firefox/12":
- $('#browserDetectcontainer').load('browserUpdate.html #browserDetect');
- $("#browserDetectcontainer").on("click",".close",function(){
- $("#browserDetectcontainer").empty();
- return false;
- }); // end browserDetecter
- break;
- });// end of document ready
- 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.
- $(document).ready(function() {
- $(function(){
- var browser = navigator.userAgent;
- switch ( browser.indexOf() !==-1) {
- case 'Firefox/12':
- $('#browserDetectcontainer').load('browserUpdate.html #browserDetect');
- $("#browserDetectcontainer").on("click",".close",function(){
- $("#browserDetectcontainer").empty();
- return false;
- }); // end browserDetecter
- break;
- }
- });
- });// end of document ready
- 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 outsidethe 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!- // javaScript:
- window.onload = initAll;
- function initAll(){
- document.getElementById("redirect").onclick = clickHandler;
- }
- function clickHandler(){
- if(this.toString().indexOf("index")< 0){
- alert("we are not responsible for the content of pages outside our site!");
- }
- }
- //jQuery
- $(document).ready(function(){
- $("#redirect").click(function(){
- function clickHandler(){
- if(this.toString().index("index")< 0){
- alert("we are not responsible for the content of pages outside our site!");
- }
- });
- 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- 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?
- <!DOCTYPE html>
- <html>
- <head>
- <title>welcome</title>
- <!-- w/o this tag, the browser will squeeze our layout to the page i.e. making it small-->
- <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
- <!-- jQuery mobile, remote links -->
- <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
- <!-- jQuery mobile, local links -->
- <script src="_js/jquery.mobile.structure-1.0.1.min.css"></script>
- <script src="_js/jquery.mobile-1.0.1.min.css"></script>
- <link href="_css/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css"/>
- <link href="_css/retina.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)">
- <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
- <!-- To use this script, it must be included before the <body> element (i.e. in the <head>) but doesn't matter if it appears before or after the CSS - but for the sake of performance, it would make better sense to include the CSS first then this script. -->
- <!--[if lt IE 9]>
- <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- </head>
- /* Retina */
- @media screen and (-webkit-min-device-pixel-ratio: 2.0),
- only screen and (-o-min-device-pixel-ratio: 3/2),
- only screen and (min--moz-device-pixel-ratio: 1.5),
- only screen and (min-device-pixel-ratio: 1.5) {
- div#crest {
- margin-left: auto;
- margin-right: auto;
- background:url('../_images/crestButton@2x.png')no-repeat;
- -webkit-background-size: 80px 79px;
- z-index: 1999;
- }
- body{
- border-bottom: 1px solid #c48d73;
- padding: 0;
- margin:0;
- padding:0px;
- background:url('../_images/aortiz_bg@2x.png');
- background-repeat: no-repeat;
- border: 1px solid #050201;
- width: auto;
- -webkit-background-size: 1271px 920px;
- }
- }
- @media screen and (device-width:768px) and (orientation:portrait){
- body{
- border-bottom: 1px solid #c48d73;
- padding: 0;
- margin:0;
- padding:0px;
- background:url('../_images/aortiz_bg@2x.png');
- background-repeat: no-repeat;
- border: 1px solid #050201;
- width: auto;
- -webkit-background-size: 1271px 920px;
- }
- }
- @media screen and (device-width:768px) and (orientation:landscape){
- body{
- padding: 0;
- margin:0;
- padding:0px;
- background:url('../_images/aortiz_bg@2x.png');
- background-repeat: no-repeat;
- border: 1px solid #050201;
- width: auto;
- -webkit-background-size: 1271px 920px;
- }
- }
Attachments- iOS Simulator Screen shot Apr 5, 2012 10.34.28 AM.png
- Size: 172.64 KB Downloads: 1643
- 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 graphicfunction fadespinner() {$('#animatedStars').fadeOut('slow', function() { //stop spinner$(this).remove();}); //remove spinner}
- 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.<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 »
Moderate user : 718bklynqns
© 2013 jQuery Foundation
Sponsored by
and others.