1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

i need help with this code

Discussion in 'HTML & Website Design' started by bersy, Mar 17, 2013.

  1. #1
    please any one help me with this code i just want when i choose the category automatic open the gategory link

    <div class="hr_line">&nbsp;</div>   
          <b>Choose category:</b>   
    <select name="search_order_u" id="search_order_u">         
        <option selected="selected" cat="">----</option>         
     
        <option value="1" cat="movies" id="7" herf="/movies/">Movies</option>         
        <option value="2" cat="games" id="9" herf="/games/">Games</option>           
    </select>   
           
    <div class="hr_line">&nbsp;</div>
    Code (markup):

     
    Solved! View solution.
    bersy, Mar 17, 2013 IP
  2. EricBruggema

    EricBruggema Well-Known Member

    Messages:
    1,740
    Likes Received:
    28
    Best Answers:
    13
    Trophy Points:
    175
    #2
    add to the <select the following line


    onchange="location.href=this.options[this.options.selectedIndex].value"
    and it should work.. have fun with it!
     
    EricBruggema, Mar 17, 2013 IP
  3. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #3
    The previous post seems correct, but inline on-events may not be the best solution.

    But this :
    IMHO, a DIV with a non breaking space inside is not the best way to make a horizontal rule.

    <hr>, or <hr /> if you're under XHTML, is the correct way to do it. Not to mention that it's semantically correct, since "hr" in <hr> stands for "horizontal rule". I am aware that it may be hard to style in old IE, but suck it up for good cause.
     
    wiicker95, Mar 18, 2013 IP
  4. bersy

    bersy Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    i added the code but doesn't work i don't know where the problem
    <div class="hr_line">&nbsp;</div>   
          <b>Choose category:</b>   
    <select name="search_order_u" id="search_order_u">         
        <option selected="selected" cat="">----</option>         
     
        <option onchange="location.href=this.options[this.options.selectedIndex].value" value="1" cat="movies" id="7" herf="/movies/">Movies</option>         
        <option onchange="location.href=this.options[this.options.selectedIndex].value" value="2" cat="games" id="9" herf="/games/">Games</option>           
    </select>    
    Code (markup):
     
    bersy, Mar 18, 2013 IP
  5. EricBruggema

    EricBruggema Well-Known Member

    Messages:
    1,740
    Likes Received:
    28
    Best Answers:
    13
    Trophy Points:
    175
    #5
    or add onchange="location.href=this.value" that should also work if i may believe other users on other places on the net :) oh and don't add it to the option my friend add it to the <select
     
    EricBruggema, Mar 18, 2013 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    ASSUMING it's semantically correct -- since a HR says "this section ends and a new one starts" -- even HTML 5 which I usually piss on from orbit says that.

    REALLY this code is a laundry list of how not to write a form element... with the bold tag doing label's job, multiple DIV likely for nothing, etc, etc... Much less you can't onchange OPTION, you can only onchange the SELECT! It does NOT go on OPTION. Generally speaking the only attributes OPTION should ever have is SELECTED or VALUE, and value is generally speaking redundant in a lot of cases.

    Much less there's no such thing as a CAT attribute on a OPTION... ID's can't start with numbers, there's no such thing as a herf attribute, OPTION can't have HREF's...

    This would work... kind-of

    <div class="selectArea">
      <label for="searchOrder">Choose category:</b>   
    	<select
    		name="search_order_u"
    		id="searchOrder"
    		onchange="location.href=this.options[this.selectedIndex].value"
    	>
    		<option selected="selected">----</option>         
    		<option value="/movies/">Movies</option>         
    		<option value="/games/">Games</option>           
    	</select>
    </div>
    Code (markup):
    BUT, if you select ---- it's gonna try to go to ---, so the script needs to be more complete. NOT that this is actually a job for a SELECT since you then have no scripting off fallbacks. This is a job for a numbered heading tag and a list; with CSS and scripting assistance if desired. I mean, given what this does there is no reason for it to be using form elements -- I half suspect you don't even have a form.
     
    deathshadow, Mar 18, 2013 IP
  7. bersy

    bersy Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #7
    thank u about that great help for my friends ericbruggema and wiiker and deathshadow
    the last code from deathshadow it's the right code and working
    thank u for all my friends here :)
     
    bersy, Mar 18, 2013 IP
  8. EricBruggema

    EricBruggema Well-Known Member

    Messages:
    1,740
    Likes Received:
    28
    Best Answers:
    13
    Trophy Points:
    175
    #8
    Your welcome, hope you have learned something from it (even i did learn a bit from deathshadow!)
     
    EricBruggema, Mar 19, 2013 IP
  9. bersy

    bersy Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #9
    yeah i try to learn from our masters at here :)
     
    bersy, Mar 19, 2013 IP
  10. #10
    Well, notice I was saying it's NOT the proper markup, or even javascript's job to do what you are trying to do. All you've really got here is a dropdown menu, NOT a select. It is NOT select's job to send you to another page -- that's an ANCHOR's job. An anchor can do this WITHOUT scripting...

    Which is why I'd have this for markup:
    
    <div class="chooseCategory">
    	<h2>Choose category</h2>
    	<ul>
    		<li><a href="/movies/">Movies</a></li>
    		<li><a href="/games/">Games</a></li>
    	</ul>
    </div>
    Code (markup):
    and then turn it into a normal CSS dropdown instead of a SELECT. SELECT is a form element -- it belongs inside a form... and it should NOT be used as a dropdown to select a HTML destination. Something like:

    .chooseCategory {
    	position:relative;
    	overflow:hidden;
    	width:12em;
    	height:1.5em;
    	text-align:center;
    	border:0.1em solid #000;
    }
    
    .chooseCategory:hover {
    	overflow:visible;
    }
    
    .chooseCategory h2 {
    	font:normal 100%/150% arial,helvetica,sans-serif;
    	background:#FFF;
    }
    
    .chooseCategory h2:before {
    	content:"\0021D3";
    	float:right;
    	width:1.2em;
    	background:#DDD;
    	border-left:1px solid #000;
    }
    
    .chooseCategory ul {
    	position:absolute;
    	overflow:auto;
    	top:1.5em;
    	left:50%;
    	width:12em;
    	max-height:7.5em; /* 5 times line-height */
    	margin-left:-6.1em; /* 1/2 width + border width to center it */
    	font:normal 100%/150% arial,helvetica,sans-serif;
    	background:#FFF;
    	border:0.1em solid #000;
    }
    
    .chooseCategory li {
    	display:inline; /* to prevent IE7 staircase bugs */
    }
    
    .chooseCategory a {
    	display:block;
    }
    
    .chooseCategory a:active,
    .chooseCategory a:focus,
    .chooseCategory a:hover {
    	background:#EEE;
    }
    Code (markup):
    Which I put a live copy of up here:
    http://www.cutcodedown.com/for_others/bersy/template.html

    With my usual wide-open directory for easy access to the bits and pieces.
    http://www.cutcodedown.com/for_others/bersy/

    I duplicated the 'games' one a few times so we could see that the scroller on the LIST (since it seems to be a list of choices, that's the semantically correct tag set).

    It's a good deal of CSS I'll admit -- but unlike a select you have full control over it's styling, uses semantically correct tags, functions when javascript is missing, and even functions CSS OFF, and your scripted version would have needed more code so you could filter out the value="-----" anyways. This also has the added bonus that it gives search engines a meaningful way to spider the site.

    That's the "proper" way of doing that -- save the "stupid javascript tricks" for when you need them.
     
    deathshadow, Mar 19, 2013 IP
  11. bersy

    bersy Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #11
    wow it's another great code i just put it and working that's really great work
    u should come to egypt to teach me html :) u are genius i send to u my site to check it
     
    bersy, Mar 19, 2013 IP