Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 22

Thread: Cross-browser Styled Dropbox

  1. #11
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    142
    Thanks
    102
    Thanked 1 Time in 1 Post

    Default

    Thanks Deadweight. I just meant I'm not sure about how to enter the style classes you used into the code I'm working with.
    Below is the full code including the style and php code that populates all the option titles, as it is in the wp theme:

    In your dropdown, after a certain number of listed options (say, size="6"), does it have a styled scrollbar?

    Thanks,

    Kenny

    Code:
    <form action="<? bloginfo('url'); ?>" method="get">
     <div id="mySelect" class="styled">           
     <select name="page_id" id="page_id">
     <?php
     global $post;
     $args = array( 'numberposts' => -1);
     $posts = get_posts($args);
     foreach( $posts as $post ) : setup_postdata($post); ?>
    <option style="border:1px solid #3d2a1b;color:#E3B172;background:#37271A;" value="<? echo $post->ID; ?>"><?php the_title(); ?>
    </option>
     <?php endforeach; ?>
     </select>
    </div>
    <br /><br />
     <input type="submit" name="submit" value="View" style="	width:100px;
        height:22px;
    	color:#E3B172;
    	background: #37271A;
    	background: -webkit-gradient(linear, right top, right bottom, from(#37271A), to(#4F3A27));
    	background: -moz-linear-gradient(#37271A, #4F3A27);
    	background: -webkit-linear-gradient(#37271A, #4F3A27);
    	background: -ms-linear-gradient(#37271A, #4F3A27);
    	background: -o-linear-gradient(#37271A, #4F3A27);
    	-pie-background: linear-gradient(#37271A, #4F3A27);
    	background: linear-gradient(#37271A, #4F3A27);
        border: 1px solid #4C3726; 
    	-webkit-border-radius: 6px 6px 6px 6px;
    	-moz-border-radius: 6px 6px 6px 6px;
    	border-radius: 6px 6px 6px 6px;
        -webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
        -pie-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    	-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    	box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    	cursor:hand;"/>
     </form>

  2. #12
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    I am suggesting to replace that current code with mine. I am working on something to make it much more simple to use also.
    In my JavaScript File ill have something like this:
    Code:
    	dw_dropdown({
    		id: 'check',
    		selectedData: ['Select One','#'], //Text, Link
    		dropdownArrow: 'down.gif',
    		selectedStyle: ['',''], //Text, Arrow
    		itemSelection: 
    			[
    				['The Billy Joe Conor Story','http://www.guyarseneau.com/the-billy-joe-conor-story-2/'],
    				['Keeping Thomas Edison’s Legacy Alive in New Jersey','http://www.guyarseneau.com/keeping-thomas-edisons-legacy-alive-in-new-jersey/'],
    				['Tweet Bird of Youth','http://www.guyarseneau.com/tweet-bird-of-youth/'],
    				['No Restin’ for Weston – Randy Weston','http://www.guyarseneau.com/no-restin-for-weston-randy-weston/']
    				// Last no ending coma.
    				
    			], // Text, Link
    		button: ['',''] //Text, style
    	})
    This function will create the whole menu for you and post it. So instead of it updating from php it will update in JavaScript. This will also mean you would just need to update this one page and it will update the rest ^^
    This will be much more simple. Also, for me i think you are getting to much information from the your database. It seems to take your page forever to load (no offense).

    Also in that style try adding this:
    overflow: hidden;
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #13
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    142
    Thanks
    102
    Thanked 1 Time in 1 Post

    Default

    Hi Deadweight!

    Regarding the code I posted, it's actually part of a wordpress theme I'm using for my cousin's website.
    The php has to remain as it is in order that the dropdown get automatically updated when new articles
    are added or the order in which they appear is changed. The php will automatically reflect whatever
    changes are made. The list is never static.

    Regarding the slowness of the site, you are so right. Its a fault of the hosting provider, iPage. They
    claim that the load time will normalize as soon as they complete an upgrade they're doing - but this
    site has been slow ever since I installed it a couple of weeks ago. My own website, which is html and is
    in the same root folder, loads normally. So, whatever they're upgrading is affecting the WP site only.
    Last edited by KennyP; 08-17-2014 at 01:49 AM.

  4. #14
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    Anyways, not sure if you tried:
    <input type="submit" name="submit" value="View" style=" width:100px;
    height:22px;
    color:#E3B172;
    background: #37271A;
    background: -webkit-gradient(linear, right top, right bottom, from(#37271A), to(#4F3A27));
    background: -moz-linear-gradient(#37271A, #4F3A27);
    background: -webkit-linear-gradient(#37271A, #4F3A27);
    background: -ms-linear-gradient(#37271A, #4F3A27);
    background: -o-linear-gradient(#37271A, #4F3A27);
    -pie-background: linear-gradient(#37271A, #4F3A27);
    background: linear-gradient(#37271A, #4F3A27);
    border: 1px solid #4C3726;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
    -webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    -pie-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    cursor:hand; overflow:hidden; "/>
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  5. #15
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    142
    Thanks
    102
    Thanked 1 Time in 1 Post

    Default

    Thanks for your help Deadweight.
    As you see below, I do have overflow:hidden, but, in the options list I have overflow-y:scroll. I do want a scrollbar, a styled scrollbar. That's what I haven't been able to add unfortunately.


    Code:
    #mySelect {	
        position: relative;
        top: 0px;
        left: 0px;
    }
    
    .styled {
    	font-size:13px;
    	color:#E3B172;
        width: 185px;
        height: 26px;
        overflow: hidden;    
    	background: url(/images/dropdown-arrow.png) no-repeat 100% #37271A;
        border: 1px solid #4C3726; 
    	-webkit-border-radius: 6px 6px 6px 6px;
    	-moz-border-radius: 6px 6px 6px 6px;
    	border-radius: 6px 6px 6px 6px;
        -webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
        -pie-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    	-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    	box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.5);
    	cursor:hand;
    	
    } 
    .styled:hover {
        border: 1px solid #4C3726; 
    	
    }
    
    .styled select {
    	overflow-y:scroll;
    	color:#E3B172;
        position: relative;
        background: transparent;
        top: 01px;
        left: 0px;
        width: 214px;
        height: 24px;    
        padding: 2px 0px 3px 2px;
        font-size: 13px;
        -webkit-appearance: none; 
    	border:none;
    }

  6. #16
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  7. The Following User Says Thank You to Deadweight For This Useful Post:

    KennyP (08-17-2014)

  8. #17
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    142
    Thanks
    102
    Thanked 1 Time in 1 Post

    Default

    Yep, exactly! Coincidentally, that particular code is one I tried to add a styled scrollbar, but unfortunately it didn't play nice with the rest of the code and didn't work. Also, that particular one wasn't cross-browser. I tried others - but couldn't get any of them to work with rest of the code included.

  9. #18
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    If i remember correctly http://www.dynamicdrive.com/forums/m...807-vwphillips had created something like what you are looking for. Message him.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  10. #19
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    142
    Thanks
    102
    Thanked 1 Time in 1 Post

    Default

    Thanks Deadweight, but there's no such item listed on that page.

  11. #20
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 Posts

    Default

    It's a person and you have to send him a message about it.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

Similar Threads

  1. Styled vertical nav bar
    By jhatter in forum CSS
    Replies: 1
    Last Post: 07-07-2010, 10:18 PM
  2. styled scrollbars?
    By tpravioti in forum CSS
    Replies: 6
    Last Post: 02-04-2010, 01:20 AM
  3. Dropbox
    By Medyman in forum The lounge
    Replies: 2
    Last Post: 03-02-2009, 05:33 PM
  4. Styled Drop List
    By dude9er in forum CSS
    Replies: 1
    Last Post: 02-26-2009, 06:38 AM
  5. Amazon style dropbox delay option?
    By adambm in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 10-06-2006, 09:08 AM

Bookmarks

Posting Permissions

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