Search the Community

Hey, I'm new to CSS and trying to figure something out. I want to have my search bar so when the user clicks it, the entire page fades except for the search bar. So although the bar itself doesn't change, it creates the effect of it being highlighted. If anyone could point me in the right direction that would be great! Thanks Dan

Hello, I think I'm in the right spot... I have a search "magnifying glass" icon in the main navigation of my site that when clicked a full page search bar pops up. Currently, you have to then click again in the search bar to make it active to start typing. I'm trying to make it so that you don't have to click on the search bar a second time after the search icon has been clicked. So, basically once the icon is clicked and the search pops up, the search bar is active and ready for the user to type. You can view the site here: https://www.goiwt.com Any and all help would be greatly appreciated! Thanks in advanced.

Hello everyone! I've got 6 details I wish to improve through my WP theme, Evolve. And I guess I need some CSS for them but I'm not good enough right now to do it all alone... So, I'm asking for your help today! I hope I'm not asking to much... Here is my (french) website : le-chemin-du-butterfly.fr 1. You can see I've got a widget on the right of my page. I'd like to resize it to give more space to my text (right now, it's 66% and 33% and I would like 75%-25%). I tried some things but I have to made it so that it still responsive. But I don't know how... I guess I have to add some If or And but.. how? 2. Again with this menu, I would like my text to be around it. Right now, the text is only in its column and doesn't go under the widget when it's after it. Menu and text are truly separated in two columns 3. Talking about menu, you can see I've got 2 links in my header ("Une Histoire de Bouquins" and "The Voyage"). What I'm looking after is to duplicate it on the right to add other links... But I guess it's HTML rather than CSS and I need to configure the theme itself for this right? But then, have you tips for me to do so? 4. I've got a search bar in the header but on small screens this search bar doesn't show very well: the text that's shown when you click on the button is shown... all time on small screens. So, it's not very... Professional. 5. I ran the plugin Livefyre for the comments but since, the "Leave a comment" (Laisser un commentaire) doesn't scroll down to the comments menu, because the anchor is #respond and not "#comments" or "#livefyre-comments" as the Livefyre's Support told me. So, how I can I manage that? Here is a link to an article for an example I know I'm asking a lot (especially for a first message!) but I've to say I'm kind of lost in all of this. I'm learning HTML/CSS from not so long and I can't figure out how to do this... Thank you a lot in advance!And see you

how can I place search bar in my website . the search bar will provide my website content by search algorythom

Hi All, I am having issues with my search bar on my website www.uHeadphones.Com. When I click the search bar to input a keyword or anything it is refreshing my index page. If I am on my product page it is refreshing back to my index page. Pretty much it is acting as my logo button in the top left of the header. Can someone please help me out with this. I can't figure out what is wrong with the code. I am decent with HTML but not so great with JavaScript. Below I am going to post my header HTML code as with as my script.js JavaScript code. HTML in Header: actual search bar code in red <!-- START HEADER --><script type="text/javascript" src="themes/default/inc/scripts.js"></script><script type="text/javascript" src="themes/default/inc/jquery.megamenu.js"></script><script language="JavaScript" src="https://seal.networksolutions.com/siteseal/javascript/siteseal.js" type="text/javascript"></script> <div class="searcharea"> <div class="custom-search" id="ctl00_ctl02_searchBox"> <input type="text" class="textbox custom-search-field" type="text" maxlength="100" id="search-textbox" class="textbox" value="Enter keyword(s), item #, etc..." onblur="if (this.value == '') {this.value = 'Enter keyword(s), item #, etc...';}" onfocus="if (this.value == 'Enter keyword(s), item #, etc...') {this.value = '';}" /> <input type="image" class="custom-search-button" alt="Go" src="themes/default/images/btn_header_search.gif" id="search-button" name="ctl00$ctl02$go" /> </div></div> JavaScript: Script.JS file:jQuery(function(){ var SelfLocation = window.location.href.split('?'); switch (SelfLocation[1]) { case "justify_right": jQuery(".megamenu").megamenu({ 'justify':'right' }); break; case "justify_left": default: jQuery(".megamenu").megamenu(); } }); function loadSearch() { var searchText = document.getElementById("search-textbox"); var searchButton = document.getElementById("search-button"); searchButton.onclick = function() { if (searchText.value != '') { window.location = '/search.aspx?find=' + encodeURIComponent(searchText.value).replace(/%20/g, '+'); return false; } };} MC.addLoadEvent(loadSearch);// Start Simple Text Popup//(function($){// $.fn.scSimpleText = function(options){ // var defaults = { // popCloseTxt : '' // }; //var settings = $.extend({},defaults,options); //return this.each(function(){ // var nextElm = $(this).next(); // var closeElement = $(document.createElement("a")).attr("href","").text(settings.popCloseTxt).addClass("scSimpleTextClose").click(function(e){nextElm.fadeOut("slow"); e.preventDefault();}); //$(this).click(function(e){ // nextElm.fadeIn("slow"); //nextElm.append(closeElement); // e.preventDefault(); // }); // });// }// End Simple Text Popup /**********************************************************************************************************//****************************** Place all add on JS above here, please minify *****************************//**********************************************************************************************************/ /************************************* Document on Load jQuery Functions **********************************/ jQuery(document).ready(function() { // simple text popup for privacy link // $("#simpleTextLink").scSimpleText({popClose:".simpleTextRight"});

i need help moving my search bar on my website to the left. i don't know anything about HTML but I'm learning i just cant figure this out can someone please help? i added a picture of what my site looks like maybe it could help. i don't even know where to start looking please help! i want to get my site up and running before my trial is over. My HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><!--DYNAMIC PAGE-SPECIFIC META TAGS WILL BE PLACED HEREDO NOT ADD YOUR OWN META TAGS, ONLY PUT CSS/JAVSCRIPT INCLUDES IN YOUR HEAD TAG--><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link href="/v/vspfiles/templates/104/css/Imports.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="/v/vspfiles/templates/104/js/v_custom.js"></script></head> <body id="body"><div id="header"> <div class="site_tools"> <div id="display_homepage_title" class="colors_homepage_title"><img src="/clear1x1.gif" style="height: 26px; width: 350px;" border="0" /></div> <div id="search_box"> <label id="search_label">Search:</label> <div id="display_search"> <form action="Config_FullStoreURLSearchResults.asp" method="get" name="SearchBoxForm"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td valign="middle"><input type="text" maxlength="20" value="" name="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" /></td> <td valign="middle"> <img border="0" onclick="document.forms['SearchBoxForm'].submit();" src="/v/vspfiles/templates/104/images/template/btn_go.gif" style="cursor: pointer;" alt="Search"/></td> </tr> </table> </form> </div> </div> </div> <div id="top_nav"> <ul> <li><a href="Config_FullStoreURLaboutus.asp">About Us</a></li> <li><a href="Config_FullStoreURLshoppingcart.asp">View Cart</a></li> <li><a href="Config_FullStoreURLmyaccount.asp">My Account</a></li> <li><a href="Config_FullStoreURLhelp.asp">Help / FAQ</a></li> </ul> </div> <div class="clear"></div> <div id="display_menu_3" class="topmenu"></div></div> <div id="content"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" id="left_nav" width="160"> <div id="main_nav"> <div id="first_nav" class="nav_section"> <h3 style="color: Menu1_Title_TextColor; background-color: Menu1_Title_BgColor;">Menu1_Title</h3> <div id="display_menu_1" class="left_menu"></div> </div> <div id="second_nav" class="nav_section"> <h3 style="color: Menu2_Title_TextColor; background-color: Menu2_Title_BgColor;">Menu2_Title</h3> <div id="display_menu_2" class="left_menu"></div> </div> <div id="fourth_nav" class="nav_section"> <h3 style="color: Menu4_Title_TextColor; background-color: Menu4_Title_BgColor;">Menu4_Title</h3> <div id="display_menu_4" class="left_menu"></div> </div> <div id="fifth_nav" class="nav_section"> <h3 style="color: Menu5_Title_TextColor; background-color: Menu5_Title_BgColor;">Menu5_Title</h3> <div id="display_menu_5" class="left_menu"></div> </div> </div> <div id="display_promotions_999"> <p>Nav Promotions</p> <br /><br /><br /> </div> </td> <td id="content_area" valign="top" ></td> </tr> </table></div> <div id="footer"> <div id="footer_top"> <ul> <li><a href="Config_FullStoreURLaboutus.asp" > Company Info</a></li> <li><a href="Config_FullStoreURLterms.asp" > Terms of Use</a></li> <li><a href="Config_FullStoreURLaffiliate_info.asp">Become an Affiliate</a></li> <li><a href="Config_FullStoreURLpindex.asp" > Product Index</a></li> <li><a href="Config_FullStoreURLcindex.asp" > Category Index</a></li> <li class="last"><a href="Config_FullStoreURLhelp.asp" > Help</a></li> </ul> </div> <div id="footer_bottom"> <p><a href="Config_FullStoreURLterms.asp" >Copyright © <script type="text/javascript">document.write((new Date()).getFullYear());</script> Config_CompanyNameLegal. All Rights Reserved.</a> <!-- =========================================================================================== VOLUSION LINK - BEGIN =========================================================================================== Customer has agreed per Volusion?s Terms of Service (http://www.volusion....onthtomonth.asp) to maintain a text hyperlink to "http://www.volusion.com" in the footer of the website. The link must be standard html, contain no javascript, and be approved by Volusion. Removing this link breaches the Volusion agreement. --> Shopping Cart Powered by <a href="http://www.volusion.com" target="_blank">Volusion</a>.</p> <!-- =========================================================================================== VOLUSION LINK - END =========================================================================================== --> </div> </div></body></html> My CSS: /* ############################### BEGIN FIXES ############################### *//* admin box */.qe_toolbar_ovr{z-index:9999 !important;}/* quick edit toolbar color fix */.qe_toolbar_ovr td{color:#000;}.qe_toolbar_ovr td a{color:#000 !important;} /* --- Color Fixes for Black Templates W09 --- */.description{color: #000 !important;}.product_name{color: #000 !important;}.quantity{color: #000 !important;}.price{color: #000 !important;}#table_checkout_cart0, #table_checkout_cart2, #table_checkout_cart3 {background-color:transparent !important;}#span_Shopping_Cart_UnEditable td {color: #ffffff ! important;}#font_checkout_cart a {color: #ffffff ! important;}#font_checkout_cart a:hover {color: #ffffff ! important; text-decoration: underline ! important;}/* winter09 */.next_page_img{width:auto !important; height:auto !important;}.previous_page_img{width:auto !important; height:auto !important;}.soft_add_content_area span, .quantity{color:#000;}.soft_add_wrapper {z-index:999;}/* ############################### END FIXES ############################### */ body{ text-align:center; margin:0; padding:0; font-size:12px; background:#000 url(../images/Template/body_background.gif) repeat-x top left; font-family: Arial, Tahoma, helvetica, sans-serif; margin: 15px;} #body .clear{clear:both;} #body a{ text-decoration:none;}#body li.last{ margin:0; padding:0; border:none;}#body a:hover{ text-decoration:underline;}#header{ width:984px; height:160px; padding:0; margin:0px auto; text-align:left; background:url(../images/template/header_bg.jpg) no-repeat left top;}#header .site_tools{ float:left; padding-top:40px; width:595px;}#header div#display_homepage_title{ float:left; width:355px; margin:0; padding:0; height:58px; text-align:left; font-size:1em;} #header div#display_homepage_title a{ text-indent:-9999px; display:block; width:100%; height:100%; text-align:left;}#header div#display_homepage_title a#homepage_title{ margin:0; padding:0; text-indent:0; display:block; width:100%; height:100%; font-size:2.2em; background:transparent; text-align:left;} #top_nav { margin:0; padding:0; width:375px; height:19px; background:url(../images/Template/top_nav_menu.gif) no-repeat 0 0; text-align:left; float:right;} #top_nav ul{ margin:0; padding:0; list-style:none; width:100%; padding-left:2em;} #top_nav ul li { display:inline;} #top_nav ul li a{ color:#FFFFFF; padding-right:3em; text-transform:uppercase; font-family: Arial, verdana, sans serif; font-size:10px; } #top_nav ul li a:hover{ color:#B9CED5; text-decoration:none;} div#search_box{ float:right; padding:10; text-align:left; width:200px; height:19px; margin:0;}#search_box label{ color:#939393; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; display:block; }#display_search{ margin:0; padding:0;}#display_search form{ padding:0; margin:0;}#display_search table td{ vertical-align:middle; height:19px; margin:0; padding:0;}#display_search input{ margin:0; padding:3px; vertical-align:middle; width:160px; border:1px solid #353535; font-size:10px;} #display_search img{ margin:0; padding:0; display:block;} #header .topmenu{ margin:28px 0 0 28px; height: 20px;} #content{ padding:0; margin:0; text-align:left; width:984px; margin:0px auto; background:#000 url(../images/Template/content_background.gif) repeat-y right top;} #content > *{ text-align:left;} #left_nav{ margin:0; padding:0; background:#000 url(../images/template/left_nav_tile.gif) repeat-y left top; height:100%; width:197px; } #left_nav h3{ margin:0; padding:0; color:#fff; font-size:12px; font-family:"Trebuchet MS"; background:url(../images/Template/left_nav_title.png) no-repeat right top; text-transform:uppercase; text-align:left; font-weight:bold; height:19px; vertical-align:middle; line-height:19px; padding-left:2.5em; margin-right:.5em; margin-bottom:1.5em;} #left_nav #main_nav{ margin:0; padding:0; padding-top:1em; background:url(../images/template/left_nav_top_background.gif) no-repeat left top;} #left_nav #main_nav div.nav_section{ width:197px; padding:0; margin:0;} #display_promotions_999{ padding-left:2em; text-align:center; width:162px; margin-bottom:2em;} #content #content_area{ margin:0; padding:0em; padding-right:.2em; padding-bottom:3em; padding-left:10px; text-align:left; width:762px;} #content #content_area table{ text-align:left;}#footer{ margin:0; padding:0; text-align:left; width:984px; height:50px; position:relative; margin:0px auto; font-size:.8em; color:#fff; margin-bottom:.2em; font-family:Arial, Helvetica, sans-serif; background:url(../images/template/footer_background.gif) no-repeat left top;} #footer_top{ background:transparent none repeat scroll 0%; color:#FFFFFF; font-size:10px; font-weight:normal; left:1em; position:absolute; text-align:center; top:1.65em; width:547px;} #footer_top ul{ list-style:none; margin:0; padding:0; text-align:left; margin-left:2em;} #footer_top ul li{ border-right:1px solid #6F6F6F; display:inline; font-size:1.1em; font-weight:normal; margin-right:0.5em; padding-right:0.5em; text-align:left;} #footer_top ul li a{ color:#fff; font-weight: normal;} #footer_bottom{ margin:0; padding:0; color:#fff; position:absolute; text-align:right; font-size:10px; font-weight:normal; top:1.65em; right:1em;}#footer_bottom p{ margin:0; padding:0; color:#6d6d6d;} #footer #footer_bottom a{ color:#6d6d6d ;}#footer a{ color:#fff; font-weight:normal;} .dropdown_select{ margin-bottom:1em;}.dropdown_select select{ width:145px; margin:0; padding:0; margin-left:.5em; font-size:9px; border:1px solid #ccc;}