Spunky

Hey everyone, I am fairly new to the JQuery Mobile world, started up when I took a class where I learned about it and have been experimenting through self-teaching since. What I am trying to do is make it so when you go to my site, based on screen size, you get redirected to the mobile site: <script src="jquery-2.0.1.min.js"></script><script type="text/javascript">function jqUpdateSize(){ // Get the dimensions of the viewport var width = $(window).width(); var height = $(window).height(); if(width < 699){ location.assign("mobileSite_2/index.html"); } };$(document).ready(jqUpdateSize); // When the page first loads$(window).resize(jqUpdateSize); // When the browser changes size//--></script> That is what I have in my header. I figure what will happen though if I give the users the ability to return to the full site, that code will only run again, and again redirect them to mobile. My first issue is how to prevent that. Obviously I can't approach the redirecting in the fashion that I am, so I was wondering what the best way is to go about it? I've researched and I know there are ways to detect devices etc. But I recall finding a stuff way back when I first started dabbling in this where mobile versions would automatically load as you make your browser on a desktop smaller and the full site would reappear as the browser window was made bigger. I would like that to occur. But I want the user to have the option to view full site even on a small screen. I have additional question that my previous issue led me to. As I was testing the fact that returning to the full site would only detect a small screen where I would then be redirected again to the mobile version, I added this link: <a href="../index.html">view full site</a> However, upon "returning" to the full site, although the URL is correct, the page that loads almost within the mobile site code...like, it follows the same JQuery Theme pretty much, which is totally not what I expected. Anyone know the reason for this?

Hey everyone. I recently viewed a tutorial for making my own JQuery slider shown here: https://tutsplus.com/lesson/the-obligatory-slider/ Problem is, it is a little bit old and I am trying to get it to work with JQuery version 2.0.1. I did change a few things already but I am having such a headache trying to debug it more (at first it would literally do nothing with no JavaScript errors). If I download the lesson from that link, the code works perfectly. Here is my code: $(function(){ var sliderUL = $('div#slider').css('overflow','hidden').children('ul'); var imgs = sliderUL.find('img'); var imgsWidth = imgs[0].width; var imgsLen = imgs.length; var current = 1; var totalImgsWidth = imgsLen * imgsWidth; $('#slider-nav').show().find('button').click(function(){ var direction = $(this).data('dir'), loc = imgsWidth; (direction==='next') ? ++current : --current; if(current === 0){ current = imgsLen; loc = totalImgsWidth - imgsWidth; direction = 'next'; }else if(current - 1 === imgsLen){ current = 1; loc = 0; } transition(sliderUL,loc,direction); }); function transition(container,loc,direction){ var units; if(direction && loc !== 0){ units = (direction === 'next') ? '-=' : '+='; } container.animate({ 'marginLeft':units ? (units + loc) : loc }); }}); I am getting no errors when I run the script but it is just not working right. It will slide to "Image 2" just fine but then it does slide to "Image 3" or "Image 4", however it recognizes the amount of slides it does and properly returns to "Image 1" at its correct time. From "Image 1" it will go to "Image 4" just fine with the previous button but again that's it and it still recognizes when it is suppose to be at "Image 1" again and returns. The HTML is just a basic list but here it is if you need to test it: <div id="slider"> <ul> <li><img src="image1.png" width="900"></li> <li><img src="image2.png" width="900"></li> <li><img src="image3.png" width="900"></li> <li><img src="image4.png" width="900"></li> </ul></div>

So I recently noticed that although a site I am working on is set to still look good when it shrinks, these background images that are used for links do not shrink since I have the div height and width set to be the size of the image. I did a little research and came across the background-size property. It works as expected: I change the width and height of the div containing the background-image, set the background-size:100%;, and it changes size according: awesome, I learned something new. However, I am trying to make it so the div's do shrink with a smaller browser and thus far have had no luck. I set up a very basic testing ground and this is what I have come up with: <html><head><style>div#mediaWrap{ width:100%; height:105px; background-image:url(social_greybar.png);}div#buttonsWrap{ margin:0 auto; width:468px; min-width:100px; height:105px;}div#youtubeLink{ height:105px; min-height:45px; width:117px; min-width:50px; float:left; background-image:url(youtube_1.png); background-size:100%;}a div#youtubeLink:hover{ background-image:url(youtube_2.png);}div#facebookLink{ height:105px; min-height:45px; width:117px; min-width:50px; float:left; background-image:url(facebook_1.png); background-size:100%;}a div#facebookLink:hover{ background-image:url(facebook_2.png);}div#googleLink{ height:105px; min-height:45px; width:117px; min-width:50px; float:left; background-image:url(google_1.png); background-size:100%;}a div#googleLink:hover{ background-image:url(google_2.png);}div#twitterLink{ height:105px; min-height:45px; width:117px; min-width:50px; float:left; background-image:url(twitter_1.png); background-size:100%;}a div#twitterLink:hover{ background-image:url(twitter_2.png);}</style></head><body><div id="mediaWrap"> <div id="buttonsWrap"> <a href="http://www.youtube.com/user/" target="_blank"><div id="youtubeLink"></div></a> <a href="https://www.facebook.com/" target="_blank"><div id="facebookLink"></div></a> <a href="https://plus.google.com/" target="_blank"><div id="googleLink"></div></a> <a href="https://twitter.com/"><div id="twitterLink" target="_blank"></div></a> </div></div></body></html> I've tried setting the max width/height as well and when I do that the div's shrink down to the minimum width/height.

So it turns out that the "sticky" navigation works perfectly in Mozilla. The browser I was originally testing this in is Chrome. Maybe there is something I need to change in the CSS? I've tried changing the overflow to none and that doesn't do it.

Well, to get a further understanding on this issue, I made the navigation bar a solid height. It doesn't shrink like before, but the contents still disappear. I've posted in the WordPress forums to see if I can get a better understanding on how the navigation bar works to see if that helps. But in general they don't really like to help with CSS which is why I came here. And you guys are the best.

That seems to make perfect sense. Trouble is, in my test environment, I created to div items and then two list items within the navigation div and floated them left so they were side by side and they moved no problem. But you're right, the contents get pushed out in the WordPress navigation so we're definitely onto something.

So I have a snippet of JQuery code that I have working perfectly how I want it in a test environment but when I apply it to my WordPress page it does not work properly. I got the code from http://www.hongkiat.com/blog/css-sticky-position/. What it does is make an element "stick" to the top of the screen as you scroll down the page. Here is my beautifully working code in my test environment: HTML <html><header><script src="jquery-2.0.1.min.js"></script><script src="myScript.js"></script><style>.sticky { position: fixed; width: 100%; left: 0; top: 0; z-index: 100; border-top: 0; }#site-navigation{ height:200px; background-color:blue;}</style></header><body><div class="wrapper"> <div class="header"> Header </div> <div id="site-navigation"> Navigation </div> <div class="content"> <p>Lots of Lorem Ipsum....</p> </div> </div> </body></html> JQUERY // JavaScript Document$(document).ready(function() { var stickyNavTop = $('#site-navigation').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('#site-navigation').addClass('sticky'); } else { $('#site-navigation').removeClass('sticky'); } }; stickyNav(); $(window).scroll(function() { stickyNav(); }); }); What happens when I apply it to my navigation bar in WordPress is that when I scroll down, just a white bar that's like ~20px high scrolls with it rather than the whole height of the bar. I know it is partially working because if I change the background color of the navigation bar to blue, it is a short blue line that follows the scroll. It could have something to do with how the contents of the navigation bar in put in, it being WordPress and all. HTML <nav id="site-navigation" class="main-navigation" role="navigation"> <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3> <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> </nav><!-- #site-navigation --> Related CSS .main-navigation { padding:0 10px; /*margin-top: 24px; margin-top: 1.714285714rem;*/ margin-top:0; background-color:#FFF;}.main-navigation div.nav-menu > ul { border-bottom:none; border-top:none;}nav.main-navigation div.nav-menu ul { text-align:center;}

Thank you very much. I'd gotten help elsewhere and I assumed since it is JQuery, that I am more unfamiliar with, it for some reason didn't need them brackets lol.

Quick quick question: I have this code: $(function(){$('body').on('click', 'input[id="selectWoodElfHighborn"]', function() { if($(this).is(':checked')) $('input.WEHoptions').attr('disabled',false); else $('input.WEHoptions').attr('disabled',true);});}); Works beautifully by the way (and cut down how much regular JavaScript code I was using by a lot!). But howcome I cannot have multiple things in the if statement? As well as disabling the selected boxes I want to also uncheck them, but I cannot so much as put an alert in the if or else in addition to the single lines that are already there. Why is this?

I fixed it! I just did 'body' instead of 'form'. What a doozy...thank you thank you thank you dsonesuk for your help and patience!

Sorry nevermind, I put the function back in and your code works fine..sorry forgot about that part.. When I implement it into my own code however...same story as before. Nothing happens until I click on one of the radio buttons or checkboxes from your form that is in there before any dynamically changing occurs. My boxes aren't in a form though, but I guess that shouldn't matter since they're still picked up...I tried using 'ul' instead of 'form' since they are in a list, but still nothing.

Using the document I created with purely your code, HTML and the Jquery, that was working before, I pasted this new code in and it too is not working. Nothing happening. Nothing erroring. Nothing. This is getting frustrating lol. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="jquery-2.0.1.min.js"></script><!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>--><!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> OLD VERSION --><!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>--><script type="text/javascript">/*<![CDATA[*//*---->*///$(function() //{ $('form').on('click', 'input[type=checkbox], [type=radio]', function() { var InputValue=0; $('input[type=checkbox]:checked, [type=radio]:checked').each(function() { InputValue = parseInt(InputValue)+parseInt($(this).val()); }); //alert(InputValue) $('#total span').html(InputValue); }); //}); /*--*//*]]>*/</script><style type="text/css">#total {border:1px solid #000; float:left; width:100px; margin: 20px; padding:5px;}</style></head><body><form action="" method="post"><input class="formBuzType" type="radio" name="buztype" value="0"><label>0</label> <br> <input class="formBuzType" type="radio" name="buztype" value="8"><label>8</label> <br> <input class="formBuzType" type="radio" name="buztype" value="1"><label>1</label><br> <input class="formBuzType" type="radio" name="buztype2" value="0"><label>0</label> <br> <input class="formBuzType" type="radio" name="buztype2" value="5"><label>5</label> <br> <input class="formBuzType" type="radio" name="buztype2" value="3"><label>3</label><br> <input type="checkbox" name="addthis" value="2" /><label>2</label><br /> <input type="checkbox" name="addthis" value="4" /><label>4</label><br /> <input type="checkbox" name="addthis" value="-6" /><label> - 6</label><br /> <!--<input type="checkbox" name="addthis" onclick="checkChecked(this)" value="-6" /><label> - 6</label><br />--> </form><div id="total">Total: <span> </span></div></body></html>

Alright. With your mock form in place. When I click mine nothing happens. But I have it alert the points now as well. When I click on your forms buttons it alerts the correct points. Only once I have clicked the forms buttons does it then show the total points in my span, including the points from my own buttons...so..something is out of whack.

Ok further testing shows the code does work. If I paste your form directly into my HTML the code works fine. Because remember, the HTML that displays my radio buttons and check boxes are all dynamically changed. So it must have something to do with that? Still doesn't make sense why the older version was working.

Yea, I can get your code to work perfectly, when I implement it into mine though, nothing. I don't understand though, it was working before with the older version, it only took a couple minor changes to switch. I must be stupidly missing something small.

With my code before when using the older JQuery and .live it was working without that extra function. I tried it though and still nothing is happening. $(function(){$('input[type=checkbox], [type=radio]').on('change', function(){ alert('enter'); var InputValue=0; $('input[type=checkbox]:checked, input[type=radio]:checked').each(function(){ InputValue = parseInt(InputValue)+parseInt($(this).val()); }); $('#playerPoints').html(InputValue);});}); The version JQuery I am using now is 2.0.1: <script type="text/javascript" src="jquery-2.0.1.min.js"></script> This code should work for a version later than 1.91 right? I'm going to try to paste your code in a separate document and see if I can get something working. Maybe I have something else going awry I got to figure out.

Sure does. But I can't get it to work. Again I ask, help please? $('input[type=checkbox], [type=radio]').on('click', function() // identify if chbox or radio has been changed{var InputValue=0;$('input[type=checkbox]:checked, input[type=radio]:checked').each(function(){ //loop through each chkbox and radio that has been selected to retrieve value and add togetherInputValue = parseInt(InputValue)+parseInt($(this).val());});document.getElementById('playerPoints').innerHTML=(InputValue); //output final result}); That is what I managed. Nothing happens when I click the items, no errors or anything. I even tried putting an alert in the first function to see if it is entered but it isn't. Thank you.

I've been using the same JQuery file for years and did not even think about newer versions coming out. But you're right, I must be using a very older version because the original code I found that lead me to try to do this was: $( "input" ).on( "click", function() { $( "#log" ).html( $("input:checked").val() + " is checked!" );}); and I had to do research to find out why my browser error console was telling me there was no .on method and that's when I discovered I should use this instead: $("input").click(function() {alert($('input[type=checkbox]:checked').val());}); .click I would much prefer to be using up-to-date code. I went to that link you provided and using it I attempted to fix my code (as well as downloaded the lasted version of JQuery) and I cannot get anything to work. The code you had me use that works with my older version of JQuery is here: $('input[type=checkbox], [type=radio]').live('change', function() // identify if chbox or radio has been changed{var InputValue=0;$('input[type=checkbox]:checked, input[type=radio]:checked').each(function(){ //loop through each chkbox and radio that has been selected to retrieve value and add togetherInputValue = parseInt(InputValue)+parseInt($(this).val());});document.getElementById('playerPoints').innerHTML=(InputValue); //output final result}); And I know the .live needs to be changed to .on but by the syntax there must be something else that needs changing. That page gives examples of .live but not .on. Could you help me out? Also, this simple JQuery code makes me want to use less strictly JavaScript since they seem to have a nice alternative to document.getElementById() and I'm sure other things I am using. Would I select a specific radio/checkbox similarly to how an HTML tag is selected in an example code I have above? How might I target a specific name (set).?

Thank you this made it work peerrrrfectly. It adds them up and every time I check a new one a new alert tells me the total. Perfect. I'm not sure what this code was for, but I don't want to have to put an onclick event control in every single radio button and checkbox in order to check for it..that is what I am avoiding. But the other code works perfect, I should be able to tweak that no problem to do what I want (instead of alert) now that I have it getting the values and adding them, thank you!

dsonesuk, as I said, I implemented the code and it isn't doing a single thing. Not alerting anything or giving any errors. I even put in <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> Just incase I am not using the correct version of JQuery and I have put in the form you created. The radio buttons and checkboxes I am using are all dynamically put into the HTML so I just want to make sure the code is meshing okay. But everything seems in check and still nothing is occuring. I can show you all of my code but it is a little confusing. <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="warhammerFunctions.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><title>Untitled Document</title></head><body [color=#0000ff]onLoad="armySelect()[/color];"><span>Warhammer</span><span id="userArmy"></span> <span id="armyPoints"></span><span id="instructions"><strong></strong></span> <p id="mainArea"> </p></body></html> The main area is where the text is dynamically being changed. function armySelect(){document.getElementById("instructions").innerHTML = "Select Army:";document.getElementById("mainArea").innerHTML = armySelectOptions();} armySelect() is running from the onload event handler in the body. function armySelectOptions(){return "<select id='selectArmy' onChange='pointSelect();'>";} mainArea is then replaced with code in armySelectOptions() I won't show all of it to keep it minimal, but it does replace it with new code from pointSelect().And then replaced again with new code from another function until we finally reach the function that replaces the html with the checkboxes and radio buttons: function WoodElfUnits(){return WoodElfUnits = "<span>With a " + armyPoints + " points army, you must follow the following specifications for your army: <ul><li>Lords Units: " + lordsUnits + "</li><li>Heroes Units: " + heroesUnits + "</li><li>Core Units: " + coreUnits + "</li><li>Special Units: " + specialUnits + "</li><li>Rare Units: " + rareUnits + "</span><span id='lords'>Lords</span><table id='WoodElfHighborn' class='unitTitle'><caption>Wood Elf Highborn (+145pts/model)<input type='checkbox' name='Wood Elf Highborn' value='145' id='selectWoodElfHighborn' onclick='selectWoodElfHighborn();'> <span id='WEHmodelNumber'></span></caption><tr><td>M</td><td>WS</td><td>BS</td><td>S</td><td>T</td><td>W</td><td>I</td><td>A</td><td>Ld</td></tr><tr><td>5</td><td>7</td><td>6</td><td>4</td><td>3</td><td>3</td><td>8</td><td>4</td><td>10</td></tr></table><span id='WandA'>Weapons & Armour: Longbow</span><span>Options</span><ul><li>May choose an additional hand weapon (+6pts) <input type='radio' name='WEH1stOption' value='6' id='WEHhandWeapon'>, a spear (+3pts) <input type='radio' name='WEH1stOption' value='3' id='WEHspear'> or a great weapon (+6pts)<input type='radio' name='WEH1stOption' value='6' id='WEHgreatWeapon'></li><li>May wear light armour (+3pts)<input type='checkbox' name='WEH2ndOption' value='3' id='WEHlightArmour'>, and may carry a shield (+3pts)<input type='checkbox' name='WEH2ndOption' value='3' id='WEHshield'></li><li>May be a member of one of the following Kindreds: Wardancer (+50pts)<input type='radio' name='WEH3rdOption' value='50' id='WEHwardancer' onclick='selectWEHwildRider();'>, Wild Rider (+50pts)<input type='radio' name='WEH3rdOption' value='50' id='WEHwildRider' onclick='selectWEHwildRider();'>, Waywatcher (+45pts)<input type='radio' name='WEH3rdOption' value='45' id='WEHwaywatcher' onclick='selectWEHwildRider();'>, Alter (+35pts)<input type='radio' name='WEH3rdOption' value='35' id='WEHalter' onclick='selectWEHwildRider();'>, Scout (+25pts)<input type='radio' name='WEH3rdOption' value='25' id='WEHscout' onclick='selectWEHwildRider();'> or Eternal (+10pts)<input type='radio' name='WEH3rdOption' value='10' id='WEHeternal' onclick='selectWEHwildRider();'></li><ul><li>If a member of a Wild Rider Kindred, may also ride a Great Stag (+50pts)<input type='checkbox' name='WEH4thOption' value='50' id='WEHgreatStag' disabled='disabled'></li></ul><li>May ride either an Elven Steed (+18pts)<input type='radio' name='WEH5thOption' value='18' id='WEHelvenSteed'>, a Great Eagle (+50pts)<input type='radio' name='WEH5thOption' value='50' id='WEHgreatEagle'> or a Forest Dragon (+320pts)<input type='radio' name='WEH5thOption' value='320' id='WEHforestDragon'></li><li>May choose Spites and/or items from the Common or Wood Elf Magic Item lists with a maximum total value of 100pts</li></ul><span id='totalPoints'></span>";} Unfortunately all the html code has to be squished together. It's just a simple program though for my own use, not a big deal. But that is the code that I am trying to make the JQuery mingle with. I have other JavaScript that mingles with it just fine so I'm just unsure what is going on, but I am not as familiar with JQuery.

It's the only code segment actually. Except for the radio buttons and checkboxes in the HTML. Would you like to see the onclick event handler I place in the body that runs the function for the other code I've tried? I figured that part was pictured well enough in the mind. Notice in my last larger post where I state when I use an event handler that is when the code works the best and closest to what I need. Actually exactly what I need except I don't want it done in an event handler for everytime the checkbox or radio button is clicked.

I tried putting this code standalone and in a function that runs when the body loads and nothing is happening, not even any errors. However, this seems like it would be doing exactly what I need. Would it add the values as the checkboxes/radio buttons are being pressed or would it require a button being pressed after all selections are checked? I haven't yet made it this far, having only been trying to retrieve the values, but my end goal is for it to add and subtract the values as they are being checked and unchecked.

What I quoted from my post is where I am having the issues of multiple alerts. There is no event handler for that code. As stated, it is standing alone, runs when it detects. I made that post to try to clear that up, justsomeguy. Hope that is clear now.

Ok here is the two things I have tried: $("input").click(function() {alert($('input[type=checkbox]:checked').val());}); This code is standing alone in the JavaScript file, I realize this is dangerous and maybe I should put it in a function that runs when the body loads..I just haven't quite figured it out. And that could be why it is messing up. What happens is, the first time I select the checkbox, nothing happens. The 2nd time I click the checkbox, it alerts undefined twice..the 3rd time it alerts the value set in the checkbox 3 times. So on so on. This is the other code I have tried...I put an event handler in the checkbox for onclick="checkChecked()l": function checkChecked(){alert($('input[type=checkbox]:checked').val());} This works perfectly. Only, I do not want to put an event handler in every single checkbox and radio button. Instead, I want it to detect anytime one is clicked and then I will handle it. The first code does this..it is just buggy. I did a bit more testing on it. In the html body I put an onclick event handler to run the function checkChecked() that looks like this: function checkChecked(){("input").click(function() {alert($('input[type=checkbox]:checked').val());});} When the page loads I get this error: Uncaught TypeError: Object input has no method 'click' There is alternative code that I tried using: function checkChecked(){$( "input" ).on( "click", function() {alert($('input[type=checkbox]:checked').val());});} But I would get this error: Uncaught TypeError: Object [object Object] has no method 'on' To which I then read that code is for a newer version so I must be using an older one. I don't know. Now neither seem to be working... I hope this clears up the code I am using and how I know I was getting confusing before.

See my EDIT I put in before I saw this reply. The JavaScript console isn't even showing anything to give me anything to go off of. As I said, with the function running the code, the val() method works, it alerts the value as expected (though now I dont know what happens if I click it a second time). EDIT: The function makes it work fine. The only flaw is that since it is an onclick event handler it tries to alert a value that doesn't exist. So maybe just the code floating by itself it isn't reaching it correctly. But I don't understand why it alerts multiple times.