Guest Posted April 28, 2020 Share Posted April 28, 2020 Site URL: https://aqua-begonia-5k3p.squarespace.com/raffles/firestickamazon-fire-tv-stick-with-alexa-voice-remote-sawr4 To anyone who read this, Little bit stuck on a problem i have. If you look at the image i have attached i have a timer in the description box under the product which counts down, im trying to get this into the product item description where you can see a time left in bold. Now the ID keep changing so i cant use javascript to edit the id of the p tag, i have also tried to add a class name to the h3 tag with no joy either. Anyone else have an idea how to solve this. Basically i need my javascript timer to be above the participate button. Any help would be great. Andy Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 Which code did you use? Which id/class did you target? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted April 28, 2020 Share Posted April 28, 2020 Hey tuanphan, so the timer i have at the minute is targeting an ID using jquery, however the bold code that has a date i need this to time down. No the problem is what ever tag it has, its ID changes on each reload, and doesnt have a class name on it. I have done the count down file in the "Additional Tab" under the product item however i need this to work within the top right description and not the bottom. Hope this makes more sense. Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 1 minute ago, Sozboss said: Hey tuanphan, so the timer i have at the minute is targeting an ID using jquery, however the bold code that has a date i need this to time down. No the problem is what ever tag it has, its ID changes on each reload, and doesnt have a class name on it. I have done the count down file in the "Additional Tab" under the product item however i need this to work within the top right description and not the bottom. Hope this makes more sense. #yui will change target #block-yui or #page or #collection Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted April 28, 2020 Share Posted April 28, 2020 So this is all i have to go off, <div class="ProductItem-details-excerpt" data-content-field="excerpt" id="yui_3_17_2_1_1588077659003_437"><h3 style="white-space:pre-wrap;" id="yui_3_17_2_1_1588077659003_436">04/05/2020</h3></div> So i inject this into the header <script> $( "#ProductItem-details-excerpt h3" ).addClass( "myClass yourClass" ); </script> But nothing Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 1 minute ago, Sozboss said: So this is all i have to go off, <div class="ProductItem-details-excerpt" data-content-field="excerpt" id="yui_3_17_2_1_1588077659003_437"><h3 style="white-space:pre-wrap;" id="yui_3_17_2_1_1588077659003_436">04/05/2020</h3></div> So i inject this into the header <script> $( "#ProductItem-details-excerpt h3" ).addClass( "myClass yourClass" ); </script> But nothing It is CLASS, not ID you need to use $(".ProductItem-details-excerpt h3") Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted April 28, 2020 Share Posted April 28, 2020 Apologies i re-typed it wrongly, i had it $(".ProductItem-details-excerpt h3") but still nothing. The h3 tag still shows up as <h3 style="white-space:pre-wrap;" id="yui_3_17_2_1_1588078305873_440">04/05/2020</h3> I might add that im only using the free 14 day trial if this means anything Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 3 minutes ago, Sozboss said: Apologies i re-typed it wrongly, i had it $(".ProductItem-details-excerpt h3") but still nothing. The h3 tag still shows up as <h3 style="white-space:pre-wrap;" id="yui_3_17_2_1_1588078305873_440">04/05/2020</h3> I might add that im only using the free 14 day trial if this means anything Have you declared jQuery library yet? also, can you setup password & share link again? Your site is private Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted April 28, 2020 Share Posted April 28, 2020 Got the class name to add onto the tag now, was referencing the library wrongly https://aqua-begonia-5k3p.squarespace.com/config/settings/site-visibility Password: TestPage101 Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 2 minutes ago, Sozboss said: Yes i have added the library in. https://aqua-begonia-5k3p.squarespace.com/config/settings/site-visibility Password: TestPage101 Can you post all code here? -- Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted April 28, 2020 Share Posted April 28, 2020 4 minutes ago, tuanphan said: Can you post all code here? -- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function () { $(".ProductItem-details-excerpt h3").addClass("test"); }); </script> <script> // Set the date we're counting down to var countDownDate = new Date("May 3, 2020 23:59:59").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Output the result in an element with id="demo" document.getElementByClass("test").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementByClass("test").innerHTML = "EXPIRED"; } }, 1000); </script> Link to comment
tuanphan Posted April 28, 2020 Share Posted April 28, 2020 t seems complicated to me, not very familiar with JS. You can also post this to some groups on FB. Squarespace Customization Resource Group. https://www.facebook.com/groups/squarespacecss/?ref=bookmarks Squarespace Community. https://www.facebook.com/groups/Squarespacecommunity/?ref=bookmarks Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.