All Activity
- Yesterday
-
hi everyone I am new to HTML programming and I am still having trouble making my website look like my web layout design from Canva. I want to make my website look like the picture in the first image (Web page layout.jpg). the second image is my HTML code. my website still doesn't look like my design from Canva. What is wrong with my code here?
-
I created remember selected tabs using localstorage for Tabs
saudiqbal replied to saudiqbal's topic in JavaScript
<li onclick="openTabs(event, 'Tools')" id="defaultOpen">Tools</li> <li onclick="openTabs(event, 'Logs')">Logs</li> <li onclick="openTabs(event, 'Files')">Files</li> <li onclick="openTabs(event, 'Links')">Links</li> -
Samuel Christian joined the community
- Last week
-
saudiqbal started following I created remember selected tabs using localstorage for Tabs
-
https://www.w3schools.com/howto/howto_js_vertical_tabs.asp Now the browser remembers which tab was selected last on page reload. function openTabs(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); localStorage.setItem("SelectedTab", cityName); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); document.getElementById(cityName).style.display = "block"; } var currentTab = localStorage.getItem("SelectedTab"); // If the current local storage item can be found if (currentTab) { //document.getElementById(currentTab).click(); openTabs(event, currentTab); } else { // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); var defaultTab = document.getElementById("defaultOpen"); localStorage.setItem("SelectedTab", 'Tools'); }
-
vinay joined the community
-
As it is a carousel it probably is looping to add a new ad at a set time. So it might be better to hide than remove. As your script only runs once after 5sec it catch first one only, unless you use setInterval then it will repeat every 5 sec. To reduce repeating loops check this element exists by checking length.
-
jasmin joined the community
-
1876 let g_arrayBooks = {}; 1877 g_arrayBooks["3,16,154"] = []; 1878 g_arrayBooks[3,16,154].push({title:"Harry Potter & the Philosopher's Stone",author:"J.K.Rowling",price:"0000000010",quantity:"1",weight:"0000000200",summary:"The novel introduces readers to the magical world of Hogwarts School of Witchcraft and Wizardry and follows the adventures of a young boy named Harry Potter. Harry Potter is an orphan who has been living with his cruel and neglectful relatives, the Dursleys, ever since his parents were killed by the dark wizard Lord Voldemort when he was just a baby. On his eleventh birthday, Harry receives a letter from a mysterious messenger informing him that he is a wizard and has been accepted to attend Hogwarts.",image_filename:""}); Uncaught TypeError: can't access property "push", g_arrayBooks[154] is undefined <anonymous> https://www.katescastle.com.au/admin.php:1878 WTF? 'g_arrayBooks[154]' DOES NOT EXIST on line 1878!
-
Your solution is NOT working. Lets see a simplified example: https://www.makeuseof.com/how-to-take-screenshots-on-android-when-the-app-doesnt-allow-it/ I want to get rid of an advertising block on the right (see attached snapshot). which starts with: <div id="K84X2hsVZN" data-ub-carousel="true" Therefor I setup a Greasemonkey script like // ==UserScript== // @name ChangeLayoutMakeuseof // @namespace nsChangeLayoutMakeuseof // @description Change Layout makeuseof.com // @match https://*.makeuseof.com/* // @exclude-match https://*.makeuseof.com/ // @exclude-match https://*.makeuseof.com/category/* // @version 2.14.1 // @grant GM_addStyle // @require http://code.jquery.com/jquery-latest.js // ==/UserScript== $('div').attr('data-ub-carousel').remove(); setTimeout(function(){ $('div').attr('data-ub-carousel').remove(); }, 5000); After adding the user script and reloading the webpage, the ad persist. Any other suggestion? https://s20.directupload.net/images/240314/gm2z76xs.png
-
Why can't JSON.Stringify convert an associative array to JSON code?????
Ingolme replied to gregaryb's topic in JavaScript
What does your Javascript code look like? -
Bradyna joined the community
-
saudiqbal joined the community
-
hebrerillo joined the community
-
Hello, I tested this today 2024-03-13 too. Problem is not resolved. I cleared my browser's history, and the problem is still there. Please fix. Thank you.
-
The array is nested similar to this example. { "Students": [ { "Name":"Amit Goenka" , "Major":"Physics" }, { "Name":"Smita Pallod" , "Major":"Chemistry" }, { "Name":"Rajeev Sen" , "Major":"Mathematics" } ] } All I get is an empty string. Why? Do I really have to manually code my own function that PROPERLY converts my associative arrays to JSON? Or is there a better quality library some where that can include to convert my associative arrays? Damn nuisance! Associative array in firefox developer tools https://drive.google.com/file/d/1Ij0E_WgaHqU0qFXr8xWkp7Brj18T-Qic/view?usp=sharing
-
How can I reset the two image selections, or all of them if there are more, to the 1st image with one action? <button class="tablinks" onclick="changeImage('01.jpg', '#bannerImage_(all???)')">reset</button> </head> <body> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'left')">left</button> <button class="tablinks" onclick="openCity(event, 'right')">right</button> </div> <div id="left" class="tabcontent"> <img id="bannerImage_left" src="01.jpg"> <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_left')" style="cursor:pointer; margin-left:40px; margin-right:40px"> <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px"> <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px"> </div> <div id="right" class="tabcontent"> <img id="bannerImage_right" src="01.jpg" ""> <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_right')" style="cursor:pointer; margin-left:40px; margin-right:40px"> <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px"> <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px"> </div> <div> <button class="tablinks" onclick="changeImage('01.jpg', '#bannerImage_(all???)')">reset</button> </div> <script>
- Earlier
-
image_selection_02.html Is it solved incorrectly if I put a 2 function (the 1st image of the image selection is selected) on the selection of the 1st tab/bannerImage_left, see html file attached? <button class="tablinks" onclick="openCity(event, 'left'); changeImage('01.jpg', '#bannerImage_left')">left</button>
-
dsonesuk started following table layout and simple image selection
-
You just need to use 'this' which is the element that the onclick event occurred as in changeImage(this, 'bannerImage_left'); then within function function changeImage(elem, bannerId) get the src: from 1st parameter elem elem.src and remove '_thumb' with elem.src.replace('_thumb',''); then add converted src to 2nd parameter bannerid ref src using document.getElementById(bannerId).src
-
Christian Eckenspieller changed their profile photo
-
I think you should take some time to read through the Javascript tutorial and do a lot of practice to get more familiar with it. You will need event listeners for the events which occur when the user goes back to the image selection. I don't know exactly which events those are and on which elements because I don't know how your whole page is set up.
-
Thanks for the quick feedback and solution. I'll have to take a closer look at the function parameter topic to understand it better. i would like to add a default function so that when i click on another menu item and then go back to the image selection, the image selection jumps back to the first image. what is the best place to start?
-
Hi I am using Pinegrow to make a simple website, and I have faced several issues that surprise me. There seems to be no option to freely move elements, and I don´t understand where to modify code to adjust it "manually". There´s a "box" that is in the way, and if I delete it, all the elements around it, jump around. https://www.filemail.com/d/gskmzmadempovgn Before and after pictures. Any help deeply appreciated
-
আমিনুল changed their profile photo
-
Md. Aminul Haque changed their profile photo
-
You gave the same name to two functions, the browser can't know which one you wanted to use. You could give the second function a different name, but the better option is to pass a parameter indicating which target you want. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>New page</title> <link href="css/style.css" rel="stylesheet"> </head> <body> <img id="bannerImage_left" src="01.jpg"> <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_left')" style="cursor:pointer; margin-left:40px; margin-right:40px"> <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px"> <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px"> <img id="bannerImage_right" src="01.jpg" ""> <img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_right')" style="cursor:pointer; margin-left:40px; margin-right:40px"> <img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px"> <img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px"> <script> function changeImage(fileName, element) {let img = document.querySelector(element);img.setAttribute("src", fileName);} </script> </body>
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>New page</title> <link href="css/style.css" rel="stylesheet"> </head> <body> <img id="bannerImage_left" src="01.jpg"> <img src="01_thumb.jpg" onclick="changeImage('01.jpg')" style="cursor:pointer; margin-left:40px; margin-right:40px"> <img src="02_thumb.jpg" onclick="changeImage('02.jpg')" style="cursor:pointer; margin-right:40px"> <img src="03_thumb.jpg" onclick="changeImage('03.jpg')" style="cursor:pointer; margin-right:40px"> <img id="bannerImage_right" src="01.jpg" ""> <img src="01_thumb.jpg" onclick="changeImage('01.jpg')" style="cursor:pointer; margin-left:40px; margin-right:40px"> <img src="02_thumb.jpg" onclick="changeImage('02.jpg')" style="cursor:pointer; margin-right:40px"> <img src="03_thumb.jpg" onclick="changeImage('03.jpg')" style="cursor:pointer; margin-right:40px"> <script> function changeImage(fileName) {let img = document.querySelector("#bannerImage_left");img.setAttribute("src", fileName);} function changeImage(fileName) {let img = document.querySelector("#bannerImage_right");img.setAttribute("src", fileName);} </script> </body>
-
Unfortunately, my browser has been marking this as a dangerous file. Perhaps you should post the code here in a code block instead.
-
Hello, I would like to implement a simple image selection. If I use the function once, the function works. If I use the function in 2 places, it does not work. I have adjusted the id for the two places, but it still does not work. Many thanks and best regards
-
If you are going to table layout which i don't recommend, I suggest you use more columns as most grid based framework use 10 to 12 grid system, with the 12 given you possibility of 1/4s 1/3s etc and few more division than the 10 grid system.
-
Thanks for the link to the grid model, I'll take a close look at it and try to rebuild my existing table on it.