Jump to content

RawrRawrRob

Members
  • Posts

    15
  • Joined

  • Last visited

RawrRawrRob's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Hmmm ya, I thought it might have something to do with that. How would I fix this?
  2. Hey everyone, I'm trying to create a simple form where a user enters their name. I have the text field with an onfocus function that creates a div next to the field telling the user to enter their name. Now, with the onblur function, if the user enters nothing, using innerHTML the div will tell them again to enter their name. If they enter any text, the innerHTML in the div will change and say thank you. Here's my code so far, I feel like I have done it right, but it doesn't seem to work the way I want it to. Any help to point me in the right direction is greatly appreciated window.onload = apply //this function adds onfocus and onblur to the name fieldfunction apply(){ //onfocus to tell the user to enter their namedocument.querySelector("#firstname").onfocus = instructionsFirstName; //onblur to check if they entered their name or notdocument.querySelector("#firstname").onblur = checkFirstName;} //onfocus instructionsfunction instructionsFirstName(){ document.querySelector("#firstNameInstructions").innerHTML = "Type your first name here";} //onblur function to check if user entered anything or notfunction checkFirstName(){ var error = ""; if(error == ""){ document.querySelector("#firstNameInstructions").innerHTML = "Please type your first name!"; }else{document.querySelector("#firstNameInstructions").innerHTML = "thank you";}}
  3. Thank you, this helped! This is what I have so far now and it adds the text to the list window.onload = init; function init(){document.querySelector("#btnList").onclick = addToList; } function addToList(){ var textbox = document.getElementById('txt');var content = document.getElementById('listContent'); var addtext = document.createElement('li'); addtext.value = textbox.value;addtext.innerHTML = textbox.value;listContent.appendChild(addtext);} Now, how do I get it so when you add the text, it also adds a span class (in my case the class is called "remove") infront of the text to the list?
  4. This is what I have so far, window.onload = init; function init(){document.querySelector("#btnList").onclick = addList;} function addList(){//this creates the paragraph to add to #listContentvar p = addParagraph(); //append the var pdocument.querySelector("#listContent").appendChild(p);} I'm wondering how I get the text from the input filed into the #listContent div. You don't need to give me the code, I just need an explanation and I can then try to figure things out myself, I appreciate the help!
  5. Here's what the HTML file looks like in the browser, with 3 instructions on the right link The button's id is "btnList"
  6. Hello, attached is a Javascript exercise for school that I'm having some troubles with! Any help/explanation is greatly appreciated! List.zip
  7. Thank you for the help! I finally got the buttons working properly!
  8. I got everything working! But now when you click on the next/back button, it doesn't go to the right image! link
  9. Thank you that worked! But I seem to have noticed another problem, when I click on either the back or next buttons, it displays the thumbnail for the corresponding image and not the large version :/
  10. Hello, I'm having trouble getting my back and next buttons in my lightbox to work! Any help will be greatly appreciated! http://imd.edumedia....term/index.html
  11. I'm still having some troubles... inside of the showIMG function this is what I have before I got stuck:var overlay = document.createElement("div");//give the new div an idoverlay.id = "overlay";//add the div to the page (inside of the parent, the body tag)document.querySelector("body").appendChild(overlay); //create the container for the lightboxvar boxer = document.createElement("div");boxer.id = "boxer"; document.getElementById("boxer").innerHTML = '<img src="images' + name + '.jpg">';
  12. Hello, thank you for replying! I've uploaded what I have so far, as you can see, when you click on an image thumb, the larger image shows up, but behind the Lightbox in a div. Why is this? Thank you!
  13. Hello, in my HTML file I have 3 rows with 5 pictures in each, and when you click on them a larger version of it appears under. How could I use Javascript so when you click on the smaller version, the larger version appears but in a lightbox? This is what I have so far in my attempts to get this working. Any help will be greatly appreciated! Here is my HTML code: <!doctype html><html><head><meta charset="UTF-8"><title>Untitled Document</title><link href="css/css.css" rel="stylesheet"/><script src="java.js"></script></head><body id="body"><div id="container"> <div id="row_one"> <div class="arrow" id="back_one"></div> <div class="thumb"> <img src="images/picone_th.jpg" alt="img1" /> </div> <div class="thumb"> <img src="images/pictwo_th.jpg" alt="img2" /> </div> <div class="thumb"> <img src="images/picthree_th.jpg" alt="img3" /> </div> <div class="thumb"> <img src="images/picfour_th.jpg" alt="img4" /> </div> <div class="thumb"> <img src="images/picfive_th.jpg" alt="img5" /> </div> <div class="arrow" id="next_one"></div> </div> <div id="row_two"> <div class="arrow" id="back_two"></div> <div class="thumb"> <img src="images/picsix_th.jpg" alt="img6" /> </div> <div class="thumb"> <img src="images/picseven_th.jpg" alt="img7" /> </div> <div class="thumb"> <img src="images/piceight_th.jpg" alt="img8" /> </div> <div class="thumb"> <img src="images/picnine_th.jpg" alt="img9" /> </div> <div class="thumb"> <img src="images/picten_th.jpg" alt="img10" /> </div> <div class="arrow" id="next_two"></div> </div> <div id="row_three"> <div class="arrow" id="back_three"></div> <div class="thumb"> <img src="images/piceleven_th.jpg" alt="img11" /> </div> <div class="thumb"> <img src="images/pictwelve_th.jpg" alt="img12" /> </div> <div class="thumb"> <img src="images/picthirteen_th.jpg" alt="img13" /> </div> <div class="thumb"> <img src="images/picfourteen_th.jpg" alt="img14" /> </div> <div class="thumb"> <img src="images/picfifteen_th.jpg" alt="img15" /> </div> <div class="arrow" id="next_three"></div> </div> <div id="imgbig_box"></div> </div> </body></html>Here is my CSS code: @charset "UTF-8";/* CSS Document */#body{background-color:#B8ECFF;}/* CONTAINER */#container{width:1200px;height:1500px;border: 2px solid;margin:0 auto;}/*ROW ONE */#row_one{width:1195px;height:150px;border:2px solid;margin: 0 auto;}/*ROW TWO */#row_two{width:1195px;height:150px;border:2px solid;margin: 0 auto;}/*ROW THREE*/#row_three{width:1195px;height:150px;border:2px solid;margin: 0 auto;}/* THUMB IMAGE */.thumb{float:left;padding:5px;}/* IMG BIG BOX */#imgbig_box{width:1050px;height:1000px; text-align:center;margin: 0 auto;border:2px solid;}/* ARROWS */.arrow{margin-top:15px;float:left;content:' '; border:20px solid;width:0;height:0;}#back_one{border-color:transparent #FFFFFF transparent transparent; }#next_one{border-color:transparent transparent transparent #FFFFFF; }#back_two{border-color:transparent #FFFFFF transparent transparent; }#next_two{border-color:transparent transparent transparent #FFFFFF; }#back_three{border-color:transparent #FFFFFF transparent transparent; }#next_three{border-color:transparent transparent transparent #FFFFFF; }And here is my Javascript code so far: // JavaScript Documentwindow.onload = awesomeness;var count = 0; var thumbs;function awesomeness(){//get all the imagesthumbs = document.querySelectorAll(".thumb img");//loop through the array, adding onclick to each of the images inside of it//start at 0 (first postion in the array) keep going so long as less than the number of objects in the array, count by 1for(var i=0; i<thumbs.length;i++){thumbs.onclick = showIMG;//give the image an idthumbs.id = i;} //add the onclick to the back and next buttonsdocument.querySelector("#back_one").onclick = goBack;document.querySelector("#next_one").onclick = goNext;document.querySelector("#back_two").onclick = goBack;document.querySelector("#next_two").onclick = goNext;document.querySelector("#back_three").onclick = goBack;document.querySelector("#next_three").onclick = goNext;} //shows the larger image when you click on the thumbnailfunction showIMG(pos){if(pos>-1){ //get the source of the image just clicked//get the image from a position inside of the thumbs array (pos is represting that position)var source = thumbs[pos].src;}else{//if pos is not a number, use the object clicked onvar source = this.src; //parseInt, want to make sure it's a numbercount = parseInt(this.id);} //get a piece of the source that we want, between the last slash and underscore//postion of the last slashvar slash = source.lastIndexOf("/");//position of the last underscorevar under = source.lastIndexOf("_"); var name = source.substring(slash,under); //make the image display using the namedocument.getElementById("imgbig_box").innerHTML = '<img src="images' + name + '.jpg" >';} //functions that run when you click on the back or nexts buttonsfunction goNext(){//increment the counter by 1 (get to the next position)count++; //if the count is greater than or equal to the number of iamges in the array, reset the count to 0if(count >= thumbs.length){count=0;} //call the function to display the larger image//give it the global variable so it will use that number showIMG(count);} function goBack(){count--; //if we are less than 0, reset to the last position in the arrayif(count<0){count = thumbs.length-1;}showIMG(count); //create the overlay divvar overlay = document.createElement("div");//give the new div an idoverlay.id = "overlay";//add the div to the page (inside of the parent, the body tag)document.querySelector("body").appendChild(overlay); //create the container for the lightboxvar boxer = document.createElement("div");boxer.id = "boxer";//add the container div to the overlay divoverlay.appendChild(boxer); //create the back button, the image, and the next buttonvar prev = document.createElement("div");var img = document.createElement("img");var next = document.createElement("div"); //give ids to the back and next buttonprev.id = "btnPrev";next.id = "btnNext"; //change the global variable that keeps our position to the id of the current imgaespos = this.id; //get the larger image from the smaler iimagevar imgsrc = this.src;var slash = imgsrc.lastIndexOf("/");var end = imgsrc.length;var name = imgsrc.substring(slash,end);//add the new source to the created image using the name from aboveimg.src = "images/" + name; //add the image and buttons to the lightbox (in order)boxer.appendChild(prev);boxer.appendChild(img);boxer.appendChild(next); //functions for the back and next buttonsprev.onclick = goPrev;next.onclick = goNext; }
  14. Hello, I'm new to JavaScript and I'm trying to use JavaScript for my website. I want to have a sample sentence, where you can select the font family it is in and then you can also click on a size option to change the display size for the font. I've tried to get this to work for a while but just can seem to do it! If anyone can help it will be greatly appreciated!
×
×
  • Create New...