Iven
-
Posts
19 -
Joined
-
Last visited
Iven's Achievements
Newbie (1/7)
0
Reputation
-
Thank you for replying and explaining that makes sense haha.
-
Hello I am doing a bit of javascript testing and I came around the following problem. I want my page to firing a function(simple alert) when my mouse moves over a certain div. However the function fires when the page loads the first time and then also the function doesn't work when I move my mouse over the div. html <html> <head> </head> <body> <div class="a" >Sample Text1</div> <div class="b">Sample Text2</div> <div class="c" >Sample Text3</div> </body> <script src="js.js"/></script> </html> js function alt() { alert(d.innerHTML); } var d = document.getElementsByClassName("b")[0]; d.onmouseover = alt(); Can anyone please explain why it is behaving like this instead of how one would expect. Thank you EDIT The same if you use getElementsByTagName("div")[1]; It works like expected if you add the event to the tag in the html itself but I want to know why it is not working with javascript only.
-
Thats awesome thank you Also what is the difference between nodeValue and innerHTML?? And which one should I use to receive the text between element tags?
-
Thank you so much dsonesuk for bringing clarity and using such an simple example. That makes so much more sense. So I am correct in assuming that node doesn't always just mean elements? It can be spaces too?
-
Hello I have a problem when it comes to traversing through DOM nodes and accessing their data(values). Please have a look at the following code HTML <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="js.js"></script> </head> <body> <div id="div1" class="div1"> <img src="1.png" style="width:100px;height:100px;"/> <h1>This is a Heading1</h1> <p>This is a paragraph1.</p> <button onclick="a(0);">Press me</button> </div> <div id="div1" class="div1"> <img src="2.jpeg" style="width:100px;height:100px;"/> <h1>This is a Heading2</h1> <p>This is a paragraph2.</p> <button onclick="a(1);">Press me</button> </div> <div id="div1" class="div1"> <img src="3.jpeg" style="width:100px;height:100px;"/> <h1>This is a Heading3</h1> <p>This is a paragraph3.</p> <button onclick="a(2);">Press me</button> </div> </body> </html> JAVASCRIPT var elements = document.getElementsByClassName("div1"); function a(index) { var d = elements[index].childNodes[3].nodeValue; alert(d); } Okay so according to my understanding if I want to access and alert the first div's h1 text value which is "This is Heading1" then my JavaScript code should be var d = elements[index].childNodes[1].nodeValue; However I do not get the text value? Also nodeValue gives me NULL if I use innerHTML I get the text value but at childNodes[3] and not childNodes[1] where you'd expect it to be? Also this example contradicts everything you find at https://www.w3schools.com/js/js_htmldom_navigation.asp Can someone please elaborate on this as it is very important to understand and I am tearing my hair out trying to figure this out.
-
Hello I mean if I use developer tools there is nothing(almost like going in the developer tools of an empty page html page instead the html page also doesn't show up in network or sources tabs in developer tools) Also I started out using the console but with above problem the console is also clear nothing shows up there.I switched to alerts because it is the only indication I have of where my code is and where it stops(at readyState 1)
-
Hello I have the following javascript code.It is suppose to execute when the html page is done loading but in stead it executes and then nothing happend (the page seems like it is loading something but nothing ever happens) Here is my code : function LoadXML() { if(window.XMLHttpRequest) { var xmlhttp = new XMLHttpRequest(); } else{ var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (this.readyState == 0) { alert("im here 0"); } if (this.readyState == 1) { alert("im here 1"); } if (this.readyState == 2) { alert("im here 2"); } if (this.readyState == 3) { alert("im here 3"); } if (this.readyState == 4) { alert("im here 4"); PopulateImages(this); } }; xmlhttp.open("GET", "person.xml", true); xmlhttp.send(); } Feels like I created an infinite loop. The alert message is for debugging purposes. I get the alert message "im here 1"(not 0,2,3,4 just 1) and then the page just keeps on loading and loading and nothing is happening. Cannot open developer tools to check what code is bugging out(if I do than no resources at yet been loaded so there is nothing I can check to try and figure out the problem). I know the code will have worked if my PopulateImages function is called but it is never called.
-
Hello and thank you for a reply again. Sorry for the inadequate information regarding the question. Your solution didn't work directly but it did lead me to the solution. I had a another div container inside the body element.And this div container had height at 100%.Using the developer debugger I figured out that when my screen width is halved the body's height stays stuck at the the image size but the div container pushed down towards the bottom (thus creating that white space it was part of the div container) So I gave my body a height of 100% like you advised and removed the height of the div container completely and boom boom it worked. Sorry again for not mentioning the things you talked about and not even mentioning the div container.It is obvious I lack some knowledge regarding this and will try my best to include all information when asking a question.I understand it can be frustrating to try and help someone but they are not giving all the information. Thanks a lot dsonesuk for the patience and that you at least tried to help with the bad way I asked the question.
-
I cannot upload anything past 270kb for some reason (almost any screenshot is way more than that and in previous questions I could easily upload any screenshots) So I will try and type the code hopefully that works HTML : cannot imagine you need anything from the html just a normal html document with <head>,<body>,<html> tags. CSS : html,body { width : 100%; height : 100%; margin : 0; } /*Set my own background image*/ body { background-image : url('media/pageBG1.jpg'); /*Get image source*/ background-size : cover; /*Display image to cover entire body*/ background-repeat : no-repeat; /*Make sure image doesn't repeat over background*/ background-position : center top; /*Position image so that size doesn't make image look bad quality*/ } PS. I wanted to upload my a screenshot of the white space cut off but since I cannot upload anythings past 270kb it is impossible
-
Awesome thanks for the reply Regardless of changing the position value(relative or none) it still didn't work. Made a quick(kind-of) fix by changing the height when the screen gets smaller than a certain size(still not a solid solution but it kind of works)
-
Hello I have a HTML page with a background image My image looks fine at full screen(normal screen) However when I change the width of my browser to half the background image gets this random white space at the bottom of the page,I want it to still cover the entire browser window but the white space makes it look really bad.
-
I think maybe I asked the question wrong. If I can use the following link as an example https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_form I have been using this to try and get it right. Let's just focus on the First Name input(text) ,the Last Name(text) and Submit(submit) input elements.It doesn't matter how you resize the window(width resize or height resize the elements stay in the container div) I got the width right(meaning I can change my width and the text input elements will resize accordingly I just had to add the width to 100% in my css). HOWEVER if I resize my window height the elements get totally pushed out of the div?How do I force it to stay in the div(or as the link example the elements stay in the div but there is a appears a scroll bar to scroll to) Examples in the pictures below
-
Iven changed their profile photo -
Hello I have a problem. I have been playing around with element width/heights and positioning to make sure everything look cool and neat regardless of how the window(or web browser window) is resized. One thing that constantly comes up is elements within a div that gets forced out of the div For example If I have a div and I set the width/height to percentages and I place elements within the div lets say a form with two inputs for username and password. If I resize my window very small there comes a point where the input boxes are totally pushed out of the div? Why is that and how can I fix it so that the element(inside div) also resizes as the div gets resizes(because of the window being resized). I am confused because I am thinking that if my div's width/height are percentages they resize dynamically as my window gets resizes why isn't this happening to the inputs or other elements(I tried with an image element and a few p elements nested inside the div) PLEASE NOTE(I already tried relative positioning didn't work, I also gave my form width/height percentages but that also doesn't work) Here is my example code for a better understanding If you look at the image called WRONG.png you will see my inputs from my form inside the div is pushing OUTSIDE the div?
-
Awesome I will get on that. Much appreciated. Also in another post I made(unrelated) someone said something about using "browser developer tools" to find JS syntax errors. Can someone please give a link or example on how to do this it will help a lot. Thanks
-
Thank you SO much for the reply it actually worked. The user Don E said I could use "browser developer tools" to find syntax errors? Any links or examples on that? It would help me a ton for the future.
