www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: I am trying to make a tab on my website confirm before gonig to the link.

  1. #1
    Join Date
    Jan 2014
    Posts
    13

    I am trying to make a tab on my website confirm before gonig to the link.

    this is what i am trying to do. First of all i am a novice so i really need Exact directions on how to do this if its possible.I have a website with 4 tabs on top (HOME,ABOUT,BLOG,CONTACT) and the prob is if someone clicks on blog it open a new windows and takes them there, and that is fine, but it they clicked it by mistake they have to click on thje window and switch. I want to be able to make it where if they hit the tab (BLOG) it will prompt them Yes or NO, that way if a mistake is made it can be resolved. Any ideas?

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>123</title>
    <style>
    body{text-align:center;padding-top:200px;}
    a:link,a:active,a:visited{color:#000;text-decoration:none;font-weight-bold;}
    a:hover{color:Crimson;text-decoration:none;font-weight-bold;}
    </style>
    <script>
    function setMenu(){
    var menulinks=document.getElementById('menu').getElementsByTagName('a');
    for(var i=0; i<menulinks.length; i++){
    menulinks[i].onclick=function(){
    return confirm("Do you really want to leave this page?");
    }
    }
    }
    
    window.onload=setMenu;
    </script>
    </head>
    <body>
    <div id="menu">
    <a href="http://www.webdeveloper.com/forum/showthread.php?289029-I-am-trying-to-make-a-tab-on-my-website-confirm-before-gonig-to-the-link">confirm before gonig to the link</a> | 
    <a href="http://www.webdeveloper.com/forum/showthread.php?289029-I-am-trying-to-make-a-tab-on-my-website-confirm-before-gonig-to-the-link">confirm before gonig to the link</a> | 
    <a href="http://www.webdeveloper.com/forum/showthread.php?289029-I-am-trying-to-make-a-tab-on-my-website-confirm-before-gonig-to-the-link">confirm before gonig to the link</a> | 
    <a href="http://www.webdeveloper.com/forum/showthread.php?289029-I-am-trying-to-make-a-tab-on-my-website-confirm-before-gonig-to-the-link">confirm before gonig to the link</a> | 
    <a href="http://www.webdeveloper.com/forum/showthread.php?289029-I-am-trying-to-make-a-tab-on-my-website-confirm-before-gonig-to-the-link">confirm before gonig to the link</a>
    </div>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Jan 2014
    Posts
    13

    Thank you very much, But!!!

    This worked when I created a new HTML file. How do I add it to my existing webpage and add it the the button I already have called BLOG? That is where I want the message to pop up. Also since you were very fast in replying, I would like to offer you some money for your time, if that is allowed let me know.

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    thanks for the offer, but this place is for free help ) since we can't see the html source of your page, i have no idea of how to add the script to it.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Jan 2014
    Posts
    13
    How can I email you the code?

  6. #6
    Join Date
    Jan 2014
    Posts
    13

    This is the code

    <!--======================== menu ============================-->
    <nav>
    <ul class="menu responsive-menu">
    <li><a href="#" title="home">Home</a></li>
    <li><a href="#" title="about">About</li>
    <li class="current"><a href="#" title="services">Services</a>
    <ul>
    </ul>
    </li>
    <li><a href="http://www.website./blog" title="blog" target="_blank">Blog</a></li>
    <li class="last-item">Contact</li>
    </ul>
    </nav>
    <div class="clear"></div>
    </div>
    <div class="clear"></div>
    </div>
    </header>

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,346
    Try something simpler.
    HTML Code:
    <script>
    function gotoit(o){
    if(confirm("Are you sure?")){
    	o.href="http://www.website./blog";
    	o.target = "blank";
    	}
    }
    </script>
    </head>
    
    <body>
    <li><a href="javascript:;" title="blog" target="" onclick="gotoit(this);">Blog</a></li>
    You want to be setting the target and href properties if they want to go to that site or not.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  8. #8
    Join Date
    Jan 2014
    Posts
    13

    Unhappy Im confused. Please explain

    Quote Originally Posted by \\.\ View Post
    Try something simpler.
    HTML Code:
    <script>
    function gotoit(o){
    if(confirm("Are you sure?")){
    	o.href="http://www.website./blog";
    	o.target = "blank";
    	}
    }
    </script>
    </head>
    
    <body>
    <li><a href="javascript:;" title="blog" target="" onclick="gotoit(this);">Blog</a></li>

    PLEASE EXPLAIN THIS BETTER!!!
    You want to be setting the target and href properties if they want to go to that site or not.
    what do I set TARGET and HREF PROPERTIES to?????

  9. #9
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,346
    Code:
    function gotoit(o){
    if(confirm("Are you sure?")){
    	o.href="http://www.website./blog"; <-- insert the URL you want to go to.
    	o.target = "blank";
    	}
    }
    </script>
    </head>
    
    <body>
    <li><a href="javascript:;" title="blog" target="" onclick="gotoit(this);">Blog</a></li>
    
    ^^^ that line above you do nothing with....
    This is pretty elementary stuff, you should be able to understand that the click calls the event onclick to run the function gotoit and it passes a reference called this which refers to the elements that are available in the <a tag, so the function will then have direct access to the properties of the element that called it.

    Then the function asks a question, you have an OK and Cancel button, clicking OK produces a true value and cancel a false value to be returned, the prompt is enclosed in an if conditional that then evaluates if a true or false exists, if true, the function then sets the href tag and target tag and the browser then takes the visitor to that page. If they cancelled the action, nothing happens, the user stays on the page.
    Last edited by \\.\; 01-21-2014 at 07:39 PM.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  10. #10
    Join Date
    Jan 2014
    Posts
    13

    I did what you said. But....

    I did what you said and the link worked , but when I click cancel it STILL takes me to the blog site. So please tell me what I am doing wrong. Thank you in advance again for helping me.



    Quote Originally Posted by \\.\ View Post
    Code:
    function gotoit(o){
    if(confirm("Are you sure?")){
    	o.href="http://www.website./blog"; <-- insert the URL you want to go to.
    	o.target = "blank";
    	}
    }
    </script>
    </head>
    
    <body>
    <li><a href="javascript:;" title="blog" target="" onclick="gotoit(this);">Blog</a></li>
    
    ^^^ that line above you do nothing with....
    This is pretty elementary stuff, you should be able to understand that the click calls the event onclick to run the function gotoit and it passes a reference called this which refers to the elements that are available in the <a tag, so the function will then have direct access to the properties of the element that called it.

    Then the function asks a question, you have an OK and Cancel button, clicking OK produces a true value and cancel a false value to be returned, the prompt is enclosed in an if conditional that then evaluates if a true or false exists, if true, the function then sets the href tag and target tag and the browser then takes the visitor to that page. If they cancelled the action, nothing happens, the user stays on the page.

  11. #11
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,346
    When I tested this on my PC it worked fine, so the question is what have you got in your code...
    It would help if you posted your code and not what I put.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  12. #12
    Join Date
    Jan 2014
    Posts
    13

    Red face This is what i did

    Quote Originally Posted by ECW View Post
    I did what you said and the link worked , but when I click cancel it STILL takes me to the blog site. So please tell me what I am doing wrong. Thank you in advance again for helping me.

    function gotoit(o){
    if(confirm("Are you sure?")){
    o.href="http://www.mywebsite.com/blog";
    o.target = "blank";
    }
    }



    <li><a href="javascript:;" title="blog" target="" onclick="gotoit(this);">Blog</a></li>

    That is exactly what you told me to do, but when I click cancel it still goes to the blog link instead
    I put the <li><a href="javascript:;" title="blog" target="" onclick="gotoit(this);">Blog</a></li> I PUT THIS RIGHT WHERE THE LINK BUTTON IS ON MY PAGE.

    function gotoit(o){
    if(confirm("Are you sure?")){
    o.href="http://www.mywebsite.com/blog";
    o.target = "blank";
    }
    }
    I PUT THIS ON THE TOP WHERE THE OTHER SCRIPT FILES ARE.

  13. #13
    Join Date
    Jan 2014
    Posts
    13
    Let me ask you a side note
    Am I supposed to use the tags
    <script> and </script> on the top?

  14. #14
    Join Date
    Jan 2014
    Posts
    13
    NM the 2nd question, I realized you need to use those quotes, but I am still having an issue.

  15. #15
    Join Date
    Jan 2014
    Posts
    13
    Sorry for all the posts, but here is an update, When I do live with my website, and I click on BLOG, it prompts me to click ok or cancel, and it works 1 time, but if I click ok, then go back and click BLOG it goes to that page, si I am able to get the option to work only on first time. Hope that helps.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles