Response title
This is preview!
- Screen name: richard1
richard1's Profile
28 Posts
66 Responses
1
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- hi guys - i need some help with something relatively simple.i have a bunch of menu items
- item 1
- item 2
- item 3
- item 4
when i click any of the items i need to toggle a class 'open' indivually for each item but if i click on another item example item 3 i need to remove the class open.this is how my code looks so far - i am able to toggle the class but it doesn't get removed when click on the different items.- $('#Menu1 .DropDownInner').on('click', function(e){
- e.preventDefault();
- $('li.dropdown').not(
- $(this).parent().toggleClass('open').parent().removeClass('open')
- );
- });
many thanks- hi i need some help with delaying keyup on an ajax call.i have 4 input boxes within the html which generates a price - it's all working as it should be i cannot enter 10 for example as ajax is triggered to update the price as soon as i enter 1.this is my code.
- $("#ajaxform").bind('rightnow change keyup', function(e) {
- $.ajax({
- type: "POST",
- url: "<?php echo ROOT; ?>ajax.php",
- data: $('#ajaxform').serialize(),
- success: function(html) {
- $("#ajaxresults").html(html).show();
- }
- });
- })
- .triggerHandler("rightnow");
- });
- Hi, im in the process of coding up a sliding out menu. at the moment i am getting the div width in jquery like this
- var Menuwidth = $('.SidebarWrapper').width();
- $(window).resize(function (){
- $(Sidebarwrapper).css({
- 'transition' : 'all 0.4s ease 0s',
- 'left' : '- + Menuwidth +' /*This needs to be -280px*/
- });
- });
- i have two 50/50 boxes. Left box has textual content inside and the right side of the box has a map inside. When i resize the browser down the height is matched perfectly using a bit of jquery. But when i resize the browser back up to a bigger size, jquery doesn't update the css height. The code i manage to put together based on what i have read on the net is as follows.An example is here http://217.199.187.191/scalegillfoot.com/ look very bottom where map and surrounding area is. Resizing the browser equals the height but when you make browser window bigger it doesn't updateany help appreciated
- function setboxHeight() {
- var SurroundingAreaHeight = $('.SurroundingArea').height();
- $('.SurroundingAreaMap').css('min-height' , SurroundingAreaHeight);
- }
- setboxHeight();
- $(window).resize(function() {
- setboxHeight();
- });
- Hi, i have two div's which are both 50% of the browser window, the left div contains a paragraph of text and the other div contains an image with background-size:cover. when i resize the browser the div with the text in gets taller and taller the smaller the window gets. I have managed to match the height of the image div with the content div but how do i update the min-height value so it adjusts responsively?This is what i have so far.
- $(document).ready(function() {
- var divHeight = $('.AboutLeftBox').height();
- $('.AboutImgContainer').css('min-height', divHeight+'px');
- });
- I have a bit of code for an ecommerce website were developing at the moment when a user lands on the product details page they have the option to select a clothing size. Once the size is selected it shows the price and whether it is in stock. This is triggered by an onchange event on the select menu.When the page loads the first size auto selected but doesn't display the contents i.e price and stock level. is there anyway i can simply show this information when the pages loads? any help greatly appreciated.
- function showProducts(str) {
- if (str == "") {
- document.getElementById("txtHint").innerHTML = "";
- return;
- } else {
- if (window.XMLHttpRequest) {
- // code for IE7+, Firefox, Chrome, Opera, Safari
- xmlhttp = new XMLHttpRequest();
- } else {
- // code for IE6, IE5
- xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- xmlhttp.onreadystatechange = function() {
- if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
- document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
- }
- };
- xmlhttp.open("GET","<?php echo ROOT; ?>ExtraProducts.php?q="+str,true);
- xmlhttp.send();
- }
- }
- 05-Feb-2017 06:50 AM
- Forum: Using jQuery
Hi, i have an unlimited grid of divs in rows of 3. How would be the best way to achieve adding a class to the 4th, 5th, 6th, 10th, 11th, 12th, 16th, 17th, 18th..... etc... div?i don't believe this is achievable with the:nth selector?any help appreciated.- 22-Sep-2016 05:21 AM
- Forum: Using jQuery
Hi, I two groups of radio buttons when one is selected i want automatically change the checked status of the radio buttons in the other list. For Example https://jsfiddle.net/4n5121f6/In my fiddle;- the default checked status of the door options is the first radio button
- the default checked status of the handle options is the first radio button
- When i click on "Door not required" from door options i want the door handle options radio button to set to last option "SET TO 0"
- If i click on any other option on door options which is not the last one i just want the 1st radio option to be checked in the door handle options list.
Hope this makes sense, i appreciate your help- I'm working on a simple full width menu whereby the list items are in one div and the inner menu is somewhere else. i have done a fiddle - https://jsfiddle.net/szrqwL9h/Basically i need to link each navigation item to the dropdown but this needs to be done in a way if more top level categories are added the menu will open for a new category.Any help would be appreciated.i did try
- $(".MastHead").find("NavDropdown").addClass('open');
- Hi, i'm looking to improve the way i use jquery and third party scripts. At the moment my site structure has all the JS at the bottom of the page including the jquery library.After jquery i have a couple of other scripts e.g below.
- jQuery
- Moment.js (for date time picker)
- Basecore.js (minified version of a bunch third part scripts i.e bootstrap, lightbox and slider plugin)
- core.js (third party plugin functions wrapped in document.ready and any other custom jquery)
Whats the best way to call the functions from the core.js only when there needed - or whats the best way to use these functions - example of my core.js file is below. My main goal is to reduce page load time and make sure im doing it properly.Any advice welcome- $(document).ready(function(){
- /*BXSLIDER*/
- $('.slides').bxSlider({
- responsive: true,
- adaptiveHeight: true,
- auto: true,
- mode: 'horizontal',
- infiniteLoop: true,
- speed: 2000,
- pause: 6000,
- startSlide: 0,
- preloadImages: 'all',
- touchEnabled: true,
- pager: true,
- controls: true,
- useCSS:false
- });
- /*lightbox*/
- $('.ilightbox').iLightBox({
- skin: 'metro-black',
- path: 'horizontal',
- fullAlone: 0,
- controls: {
- thumbnail: false,
- arrows: true,
- slideshow: false,
- fullViewPort: 'fill',
- swipe: false,
- mobileOptimizer: true
- }
- });
- /*datepicker*/
- $(function () {
- $('#datetimepicker').datetimepicker();
- $('#datepicker').datetimepicker({
- format: 'DD/MM/YY'
- });
- $('#timepicker').datetimepicker({
- format: 'LT'
- });
- });
- /*menu*/
- $(".menu-btn, .menu-btn-close").click(function(e) {
- e.preventDefault(), $(".sidebar-wrapper, .wrapper, .menu-btn, .close-menu-inside").toggleClass("active")
- });
- });
- Hi, i'm building a 3 tier drop down menu and i want the other menus to open and close depending on what link i clicked on.This is what i have so farAt the moment the first drop down opens fine and disappears when i click the other drop down. But when i click the menu item drop down within the drop down menu it doesnt open. I'm pretty sure my jquery code is wrong somewhere.Please help. Help much appreciated.
- Hi, i have a select box which accepts multiple selections (Bootstrap Select) when an option is selected i want to display an image. The image part i have done! It successfully echo's an image based on the value.But how do i loop through the options so it shows multiple images when more than 1 option is selected.
- $(document).ready( function() {
- $("#PrimaryTrade").each(function () {
- $(this).on('changed.bs.select', function (e) {
- $("img[name=image-swap]").attr("src","/images/icons/" + $(this).val() + "_Image.png");
- });
- });
- });
- Hi, Hope you're all well.I'm building a menu which opens another menu, total of 3 tiers. At the moment the menu works great - but the panels overlap each other as they open. Ideally i want to open the sub menu which closes the previous one so only one menu is open at a time. I have done a fiddle for you to see.Please help, many thanks.
- Hi, I currently have a div which i am getting the height off. Current height is 72 pixels when the height is equal to or the same as 72 i display "20" when the div goes over 72 pixels i want to display "25". I have done this so far but want the height to automatically change to 25 when the div goes bigger than 72.
- $(function(){
- var height = $(".input-container").height()
- $("#SignHeight").text(height);
- if (height <= 72) {
- $("#SignHeight").text('20');
- }
- else {
- $("#SignHeight").text('25');
- }
- });
- Hi - i have 3 radio buttons each with its own colour- red- white- antique whitehow do i detect if a certain radio selection is checked and then add a certain class to another element so it can be styled accordingly (not parent div).This is what i have so far
- Hi, i need help with getting the width of an element and displaying a value. Basically i have a customer who is building a sign making websites. The sign is just text based but the pricing side is based on the width of the sign. So far i have worked out that every 32px is 5cm.The input field auto resizes based on the text within it. but i need to display on the site the size i.e if its 32px it shows 5cm then every 32pixels it updates in 5cm increments. 5cm (32px), 10cm (64px), 15cm(96px) etc...Is this possible? if so what's the best way to accomplish it? I have a very tiny bit of jquery knowledge but am no where near confident enough to know how to pull this off.Your help is very much appreciated.
- Hi i am using a script which is a countdown timer - how in jQuery do i watch the countdown timer and check whether is over, in between or under a certain amount of milliseconds?Based on the documentation and the author (the author wasn't very helpfull and refuses to help). i have came up with this.what i want to achieve is a simple class which is added to a div based on how much time is left.if the time left is greater than 10 minutes change div to the color green.if the time left is between 1-10 minutes change div to orange and finally.if the time left is under 1 minute change div to red.I've created a fiddle of how it currently looksthere's 3 class which i want to add to the traffic-light div .green, .orange and .red based on the info above
- $(document).ready(function(){
- $('[data-countdown]').each(function() {
- var $this = $(this), finalDate = $(this).data('countdown');
- $this.countdown(finalDate, function(event) {
-
- var format = '%-Hh : %-Mm : %-Ss';
-
- if (event.offset.seconds > 600000) { //if the time is over 10minutes
- $("table").find(".traffic-light").addClass( "green" );
- } else if (event.offset.seconds > 60000-600000) { //if the time is between 1 and 10 minutes
- $("table").find(".traffic-light").addClass( "orange" );
- } else if (event.offset.seconds > 0-60000) { //if the time is between 0 and 1 minute
- $("table").find(".traffic-light").addClass( "red" );
- }
-
- $(this).html(event.strftime(format));
- });
- });
- });
- 27-Aug-2015 04:57 AM
- Forum: Using jQuery Plugins
Hi - i'm currently using a countdown timer plugin (http://hilios.github.io/jQuery.countdown/) and what i want to achieve is a simple class which is added to a div based on how much time is left.if the time left is greater than 10 minutes change div to the color green.if the time left is between 1-10 minutes change div to orange and finally.if the time left is under 1 minute change div to red.I've created a fiddle of how it currently looksthere's 3 class which i want to add to the traffic-light div .green, .orange and .red based on the info aboveis this possible? there are currently no events in the documentation like what i want to achieve. Your help is very much appreciated- 09-Jun-2015 10:23 AM
- Forum: Getting Started
Hi all - I'm having a small issue which i need help with.I have a div which has been overlayed over a set of gallery images called ".mask1". When someone hovers over this div i need it to fade out and display none added so i can use the gallery. When the mouse is moved off the gallery i need the div to fade back in after say 2 seconds.i've tried animating opacity with css but obviously the div is still their over the top so the gallery isn't clickable, i've also tried adding a class but the animation is just repeat over again making the div flicker like a strobe.If anyone could help me i would really appreciate it.Many thanks- 27-Feb-2015 05:07 AM
- Forum: Using jQuery Plugins
Hi I'm using this datepicker with the following code which works great- <script type="text/javascript">
- $(function () {
- $('#end_time').datetimepicker({
- format: 'LT'
- });
- });
- </script>
- Hi, im using a time picker from bootstrapformhelpers works great on a desktop but on mobile the up and down buttons don't increment or decrement the time as it should. I've checked various forums and stackoverflow posts for a fix but can't find anything. Theres a post on the authors github page but theres been no response since last march.Is there anyway i can target these arrows and make them increment and decrement with some jquery code which i can input on the page?
- Hi i need to append the value of a select option to a textarea. Using the code below i have managed to do this. But when i keep changing the selection option it keeps adding the values in the textarea - is there anyway to clear the last selected upon selecting a new one?
- $('select.SelectTemplate').change(function() {
- var currentVal = $('textarea').val();
- $('textarea.AddMessage').val(currentVal + $(this).val());
- });
-
- Hi, i have a bunch of fields in a field set which i want to disabled, if someone wants to edit the form they simply click the edit button and it unlocks the fields for them to edit. I am disabling the fields by adding the disabled attribute to the field set itself. I also need to remove the top margin from my form groups when the inputs are enabled. This is my jquery code so far which i can't get to work.
- <script>
- $(document).on('click' function (event) {
- event.preventDefault();
- var $btn = $(this);
- var $container = $(this).closest('.details-container');
- var $fieldset = $container.find('fieldset');
- $fieldset.removeAttr("disabled");
- $('.form-group.disabled').removeClass('disabled');
- });
- </script>
- $("#ContactAddressEdit").click(function(event){
- event.preventDefault();
- $('fieldset').removeAttr("disabled");
- $('.form-group.disabled').removeClass('disabled');
- });
- $("#ContactBillingEdit").click(function(event){
- event.preventDefault();
- $('fieldset').removeAttr("disabled");
- $('.form-group.disabled').removeClass('disabled');
- });
- $("#ContactPostagegEdit").click(function(event){
- event.preventDefault();
- $('fieldset').removeAttr("disabled");
- $('.form-group.disabled').removeClass('disabled');
- });
A fiddle can be found here- Hi thanks for taking to the time to help me on this. I have some jquery code (see below)
- var max_fields = 10; //maximum input boxes allowed
- var wrapper = $(".input_fields_wrap"); //Fields wrapper
- var add_button = $(".add_field_button"); //Add button ID
- var x = 1; //initlal text box count
- $(add_button).click(function(e){ //on add input button click
- e.preventDefault();
- if(x < max_fields){ //max input box allowed
- x++; //text box increment
- $(wrapper).append('<div class="col-xs-12"><div class="row"><div class="col-xs-9"><div class="form-group"><label>Postage Description:</label><input type="text" class="form-control" value=""/></div><!-- form-group --></div><!-- col-xs-9 --><div class="col-xs-2"><div class="form-group"><label>Postage Price:</label><input type="text" class="form-control" value=""/></div><!-- form-group --></div><!-- col-xs-2 --><div class="remove_field"><span class="glyphicon glyphicon-remove"></span><div></div><!-- row --></div><!-- col-xs-12 -->'); //add input box
- }
- });
- $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
- e.preventDefault(); $(this).parent('div').remove(); x--;
- })
the code adds html which contains form elelments (input) is there anyway to add name="" and id="" to each form field? preferably with a prefx? something like;var prefix = anythingso when the plus sign is clicked to add the elements to the dom the input fields would have name="anything_01" id="anything_01" then the next one which is added has name="anything_02" id="anything_02" etc... etc...help much appreciated.Many thanks- Hi, i have 3 select boxes which contain categories, sub categories and a further sub category. Is there anyway i can do a chain event so the last 2 are disabled but the first one is enabled.Upon selecting a category in the first form select the second form select becomes available. Then once the 2nd form select has been selected this makes the last one become available.I have created a fiddle of my select boxes - http://jsfiddle.net/L4t83nvz/Any help with this matter would be greatly appreciated.
© 2013 jQuery Foundation
Sponsored by
and others.