Search Results

Search found 57910 results on 2317 pages for 'html form post'.

Page 375/2317 | < Previous Page | 371 372 373 374 375 376 377 378 379 380 381 382  | Next Page >

  • Would Like Multiple Checkboxes to Update World PNG Image Using Mogrify to FloodFill Countries With C

    - by socrtwo
    Hi. I'm seeing in another forum if the best way to do this is with Javascript or Ajax but I'm wondering if there is an even easier simpler way. I'm trying to create a web service where users can check which countries they have visited from a list of 175 or so and a World map image would then instantly update with a filled color. There are other similar services, but I'm envisioning mine to be both updating from checks in checkboxes and by clicking on the target country in the displayed image say with an imagemap. Additionally other solutions display all the visited countries in the same color. I would like different colors for different countries or at least for those countries that touch. Eventually I would like to include a feature that enables the choice of which colors to assign countries. I found a Sourceforge project called pwmfccd. It's simply an open source image of the world and the coordinates on the PNG image for all the countries. You can use mogrify from ImageMagick and floodfill to fill the countries with color. I have done this successfully, locally with batch files. My ISP has told me where mogrify is located, basically "/usr/bin/mogrify". I now have a horrendously complicated cgi script which if it worked is set to redraw the world map image with each checkbox. It's here. It also redraws the whole web page with each check. The web page starts here. Of course this is not at all efficient, and I think probably the real way to go is Ajax or Javascript, so that maybe just the image gets changed and redrawn, not the whole web page. Sorry I don't even know the difference between Javascript and Ajax and their relative merits at this point. I suppose you could make just one part of the image update with each check or click on the image instead of even just the image redrawing, but I have never even heard of a hint at being able to do that for irregularly shaped image elements like countries. So I guess an Image map and sister checkbox entries tied to mogrify events redrawing the user's personal copy of the image with an image refresh would be the only way to go. So how do you do this with something other than Javascript or Ajax or is that definitely the way to go and if so, how would you do it? Or can you after all cut up a web based image into irregular puzzle shaped piece which you can redraw individually at will. Thanks in advance for reading and considering answering this post.

    Read the article

  • extremely small gap between two divs that are width 100%

    - by Naomi K
    hi I have two container divs one of them has a div with an image background and i think this is the div that is causing problem. I tried removing both container divs and the gap was still here. there are no margins no paddings, and i know it is not the image that has this line its not there when i open it in photoshop. I am also using css reset Where is this space coming from? css .container{ width:100%; } .container2{ width:100%; } .first-image{ width:1430px; height:497px; background-image:url('../images/introimg.jpg'); background-repeat:no-repeat; background-size: 100%; border:none; } .jamey{ width:35%; } .second-image{ width:1430px; height:430px; background-image:url('../images/secondimg.jpg'); background-repeat:no-repeat; background-size: 100%; } html <div class="container"> <div class="wrapper"> <div id="overlay"></div> <div class="first-image"> <div class="jamey"> <p class="def"> JAMEY </p> <p class="rip-date">03.02.1997 - 09.18.2011</p> <p class="def2">Anonymous hate messages were posted on his Formspring account including one that claimed:</p> </div> </div> </div> </div> <div class="container2"> <div class="intro-div"> <div class="end-hate"> <h1>PUT AN END TO HATE.</h1> <p> ANYTHING WRITTEN ONLINE can become viral </p> <p> We believe that the way we behave online should be no different from the way that we behave in </p> <button type="button">JOIN CAMPAIGN</button> </div> </div>

    Read the article

  • Button control subclass: click event does not fire when using UpdatePanel

    - by nw
    Using suggestions from this thread, I created a ModernButton control that uses the HTML button tag instead of input. This control works great except when embedded within an UpdatePanel control. In this case, it does trigger the partial postback, but its click event does not fire. The control is defined thus: [ParseChildren(false)] [PersistChildren(true)] public class ModernButton : Button { private string _iconURL = ""; protected override string TagName { get { return "button"; } } protected override HtmlTextWriterTag TagKey { get { return HtmlTextWriterTag.Button; } } public new string Text { get { return ViewState["NewText"] as string; } set { ViewState["NewText"] = HttpUtility.HtmlDecode(value); } } public string IconURL { get { return this._iconURL; } set { this._iconURL = value.Trim(); } } protected override void OnPreRender(System.EventArgs e) { base.OnPreRender(e); LiteralControl textCtrl = new LiteralControl(this.Text); if (this._iconURL != "") { LiteralControl openDiv = new LiteralControl( string.Format( "<div style=\"background-image:url({0}); background-position:left center; background-repeat:no-repeat; line-height:16px; padding:3px 0 3px 22px;\">", ResolveClientUrl(this._iconURL) ) ); LiteralControl closeDiv = new LiteralControl("</div>"); Controls.AddAt(0, openDiv); Controls.Add(textCtrl); Controls.Add(closeDiv); } else { Controls.Add(textCtrl); } base.Text = UniqueID; } protected override void RenderContents(HtmlTextWriter writer) { RenderChildren(writer); } } I use it so: <asp:UpdatePanel runat="server" ID="uxSearchPanel" ChildrenAsTriggers="true" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="uxSearchButton" /> </Triggers> <ContentTemplate> ... <ctrl:ModernButton ID="uxSearchButton" runat="server" Text="Search" IconURL="Icons/magnifier.png" OnClick="uxSearchButton_Click"></ctrl:ModernButton> </ContentTemplate> </asp:UpdatePanel> Which renders: <div id="uxBody_uxSearchPanel"> ... <button type="submit" name="ctl00$uxBody$uxSearchButton" value="ctl00$uxBody$uxSearchButton" id="uxBody_uxSearchButton"> <div style="background-image:url(Icons/magnifier.png); background-position:left center; background-repeat:no-repeat; line-height:16px; padding:3px 0 3px 22px;">Search</div> </button> </div> The ModernButton generates a postback in every case (whether partial or full), but the server-side click event (uxSearchButton_Click) does not fire in the partial postback scenario.

    Read the article

  • How can I include additional markup within a 'Content' inner property of an ASP.Net WebControl?

    - by GenericTypeTea
    I've searched the site and I cannot find a solution for my problem, so apologies if it's already been answered (I'm sure someone must have asked this before). I have written a jQuery Popup window that I've packaged up as a WebControl and IScriptControl. The last step is to be able to write the markup within the tags of my control. I've used the InnerProperty attribute a few times, but only for including lists of strongly typed classes. Here's my property on the WebControl: [PersistenceMode(PersistenceMode.InnerProperty)] [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)] public something??? Content { get { if (_content == null) { _content = new something???(); } return _content; } } private something??? _content; Here's the HTML Markup of what I'm after: <ctr:WebPopup runat="server" ID="win_Test" Hidden="false" Width="100px" Height="100px" Modal="true" WindowCaption="Test Window" CssClass="window"> <Content> <div style="display:none;"> <asp:Button runat="server" ID="Button1" OnClick="Button1_Click" /> </div> <%--Etc--%> <%--Etc--%> </Content> </ctr:WebPopup> Unfortunately I don't know what type my Content property should be. I basically need to replicate the UpdatePanel's ContentTemplate. EDIT: So the following allows a Template container to be automatically created, but no controls show up, what's wrong with what I'm doing? [PersistenceMode(PersistenceMode.InnerProperty)] [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)] public ITemplate Content { get { return _content; } set { _content = value; } } private ITemplate _content; EDIT2: Overriding the CreateChildControls allows the controls within the ITemplate to be rendered: protected override void CreateChildControls() { if (this.Content != null) { this.Controls.Clear(); this.Content.InstantiateIn(this); } base.CreateChildControls(); } Unfortunately I cannot now access the controls within the ITemplate from the codebehind file on the file. I.e. if I put a button within my mark as so: <ctr:WebPopup runat="server" ID="win_StatusFilter"> <Content> <asp:Button runat="server" ID="btn_Test" Text="Cannot access this from code behind?" /> </Content> </ctr:WebPopup> I then cannot access btn_Test from the code behind: protected void Page_Load(object sender, EventArgs e) { btn_Test.Text = "btn_Test is not present in Intellisense and is not accessible to the page. It does, however, render correctly."; }

    Read the article

  • Drupal Override Custom Menu Template

    - by JaZz
    Hi Guys, I created a custom menu called "sub-top-nav" and now I'd like to override the html output. In particular I would like to add an unique class to each item like. This is how it looks atm: <div class="clear-block block block-menu" id="block-menu-menu-sub-top-nav"> <div class="content"> <ul class="menu"> <li class="leaf first"><a title="Test 1" href="/test1">Test 1</a></li> <li class="leaf"><a title="Test 2" href="/test2">Test 2</a></li> <li class="leaf active-trail"><a class="active" title="Test 3" href="/test3">Test 3</a></li> <li class="leaf last"><a title="Test 4" href="/test4">Test 4</a></li> </ul> </div> </div> And I'd like to change it into: <div class="clear-block block block-menu" id="block-menu-menu-sub-top-nav"> <div class="content"> <ul class="menu"> <li class="leaf test1 first"><a title="Test 1" href="/test1">Test 1</a></li> <li class="leaf test2"><a title="Test 2" href="/test2">Test 2</a></li> <li class="leaf test3 active-trail"><a class="active" title="Test 3" href="/test3">Test 3</a></li> <li class="leaf test4 last"><a title="Test 4" href="/test4">Test 4</a></li> </ul> </div> </div> This would give me more styling power. Any idea how that works? Thanks in advance!

    Read the article

  • Dynamically writing page titles and active classes with php

    - by toomanyairmiles
    For some time now I've been using the following code to dynamically write in html page titles and add an active class to menu items. Is this still a good why to achieve this or are there better/smarter/optimal ways of achieving the same thing? <?php echo (basename($_SERVER['SCRIPT_FILENAME'])=='contact.php'? 'class="active"' : '');?> Menu example <ul id="nav"> <li><a href="index.php" target="_parent" <?php echo (basename($_SERVER['SCRIPT_FILENAME'])=='index.php'? 'class="active"' : '');?>><span>Home</span></a></li> <li><a href="services.php" target="_parent" <?php echo (basename($_SERVER['SCRIPT_FILENAME'])=='services.php'? 'class="active"' : '');?><?php echo (basename($_SERVER['SCRIPT_FILENAME'])=='services-landlords.php'? 'class="active"' : '');?><?php echo (basename($_SERVER['SCRIPT_FILENAME'])=='services-sellers.php'? 'class="active"' : '');?><?php echo (basename($_SERVER['SCRIPT_FILENAME'])=='services-tennants.php'? 'class="active"' : '');?>><span>Our Services</span></a></li> <li><a href="for-sale.php" target="_parent" <?php echo (basename($_SERVER['SCRIPT_FILENAME'])=='sales.php'? 'class="active"' : '');?>><span>Sales</span></a></li> <li><a href="to-let.php" target="_parent" <?php echo (basename($_SERVER['SCRIPT_FILENAME'])=='lettings.php'? 'class="active"' : '');?>><span>Lettings</span></a></li> <li><a href="register.php" target="_parent" <?php echo (basename($_SERVER['SCRIPT_FILENAME'])=='register.php'? 'class="active"' : '');?><?php echo (basename($_SERVER['SCRIPT_FILENAME'])=='register-thanks.php'? 'class="active"' : '');?>><span>Register</span></a></li> <li><a href="contact.php" target="_parent" <?php echo (basename($_SERVER['SCRIPT_FILENAME'])=='contact.php'? 'class="active"' : '');?>><span>Contact Us</span></a></li> </ul> Page title Example <?php echo (basename($_SERVER['SCRIPT_FILENAME'])=='services.php'? 'Services' : '');?> <?php echo (basename($_SERVER['SCRIPT_FILENAME'])=='services-landlords.php'? 'Services for Landlords' : '');?>

    Read the article

  • CSS3 Hover transition strange behavior

    - by Aleksandar Ivanov
    So I was playing around with transition/hover effects so that's the code. <pre> <code> /* HTML */ section> a href="#" title="button">CLICK!</a> // deleted the lt sign for visibility reasons! a href="#" title="button">CLICK!</a> a href="#" title="button">CLICK!</a> a href="#" title="button">CLICK!</a> /section> /********/ /* CSS */ section{ width: 700px; height: 500px; margin: 250px auto; position: relative; background: #08c; } section a{ border-radius: 51px; background: #e60; line-height: 100px; text-align: center; color: #04e; font-size: 24px; font-weight: bold; font-family: tahoma; text-decoration: none; display: block; width: 100px; height: 100px; } section a:nth-child(1){ position: absolute; top: -100px; left: -100px; -webkit-transition: left 2s ease; } section a:nth-child(2){ position: absolute; top: -100px; right: -100px; -webkit-transition: top 2s ease; } section a:nth-child(3){ position: absolute; bottom: -100px; right: -100px; -webkit-transition: right 2s ease; } section a:nth-child(4){ position: absolute; bottom: -100px; left: -100px; -webkit-transition: bottom 2s ease; } section a:nth-child(1):hover,section a:nth-child(1):focus{ left: 800px; } section a:nth-child(2):hover{ top: 600px; } section a:nth-child(3):hover{ right: 800px; } section a:nth-child(4):hover{ bottom: 600px; } /*******/ </code> </pre> BUT, I stumbled upon a strange thing. When I hover over a link its starts getting to its right position applied by the hover, but at some point (always different) the effect stops and it gets back to its original position! Have anyone seen this and know what is the problem ?

    Read the article

  • IE6 Bug - Div within Anchor tag: inline images not links

    - by thorn100
    I'm trying to get everything in the anchor tag to be a clickable link. Unfortunately, in IE6 (which is the only browser I'm concerned with currently), the only thing that isn't a clickable link are the inline images. I know that it's not valid html to put a div inside of an anchor but it's not my markup and I've been asked to avoid changing it. Any suggestions to altering the CSS to enable the images as clickable links? If changing the markup is the only solution... any suggestions there? My initial thought was to set the image as a background of it's parent (.ph-item-featured-img), although I'm unclear if that will solve the problem. Thanks! <div class="tab-panel-init clear ui-tabs-panel ui-widget-content ui-corner-bottom" id="ph-flashlights"> <a href="#" class="last ph-item-featured clear"> <div class="ph-item-featured-img"> <img src="#"> &nbsp; </div> <strong> PRODUCT CODE </strong> <p> PRODUCT CODE Heavy Duty Aluminum Led Flashlight </p> <span>Learn more &gt;</span> </a> <a href="#" class="last ph-item-featured clear"> <div class="ph-item-featured-img"> <img src="#"> &nbsp; </div> <strong> PRODUCT CODE </strong> <p> PRODUCT CODE Heavy Duty Aluminum Led Flashlight </p> <span>Learn more &gt;</span> </a> </div>

    Read the article

  • making the div width stretch to fit its contents

    - by Lina
    Hi, I have the following html code: <table> <tr> <td> <div id="fixmywidth" style="position:relative; height:30px;"> <div style="z-index: 2000; margin-top: 5px; height: inherit; position: absolute;"> <table style="height:inherit"> <tr style="height:inherit"> <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> ........300 tds later <td align="center" style="width: 31px; height: inherit;">&nbsp;</td> </tr> </table> </div> </div> </td> </tr> </table> how do i make the div with the id "fixmywidth" width fit the width of the containing elemets? i tried width=100% and widht = auto but they wouldn't work thanks a trillion in advance, Lina

    Read the article

  • python getelementbyid from string

    - by matthewgall
    Hey, I have the following program, that is trying to upload a file (or files) to an image upload site, however I am struggling to find out how to parse the returned HTML to grab the direct link (contained in a ). I have the code below: #!/usr/bin/python # -*- coding: utf-8 -*- import pycurl import urllib import urlparse import xml.dom.minidom import StringIO import sys import gtk import os import imghdr import locale import gettext try: import pynotify except: print "Please install pynotify." APP="Uploadir Uploader" DIR="locale" locale.setlocale(locale.LC_ALL, '') gettext.bindtextdomain(APP, DIR) gettext.textdomain(APP) _ = gettext.gettext ##STRINGS uploading = _("Uploading image to Uploadir.") oneimage = _("1 image has been successfully uploaded.") multimages = _("images have been successfully uploaded.") uploadfailed = _("Unable to upload to Uploadir.") class Uploadir: def __init__(self, args): self.images = [] self.urls = [] self.broadcasts = [] self.username="" self.password="" if len(args) == 1: return else: for file in args: if file == args[0] or file == "": continue if file.startswith("-u"): self.username = file.split("-u")[1] #print self.username continue if file.startswith("-p"): self.password = file.split("-p")[1] #print self.password continue self.type = imghdr.what(file) self.images.append(file) for file in self.images: self.upload(file) self.setClipBoard() self.broadcast(self.broadcasts) def broadcast(self, l): try: str = '\n'.join(l) n = pynotify.Notification(str) n.set_urgency(pynotify.URGENCY_LOW) n.show() except: for line in l: print line def upload(self, file): #Try to login cookie_file_name = "/tmp/uploadircookie" if ( self.username!="" and self.password!=""): print "Uploadir authentication in progress" l=pycurl.Curl() loginData = [ ("username",self.username),("password", self.password), ("login", "Login") ] l.setopt(l.URL, "http://uploadir.com/user/login") l.setopt(l.HTTPPOST, loginData) l.setopt(l.USERAGENT,"User-Agent: Uploadir (Python Image Uploader)") l.setopt(l.FOLLOWLOCATION,1) l.setopt(l.COOKIEFILE,cookie_file_name) l.setopt(l.COOKIEJAR,cookie_file_name) l.setopt(l.HEADER,1) loginDataReturnedBuffer = StringIO.StringIO() l.setopt( l.WRITEFUNCTION, loginDataReturnedBuffer.write ) if l.perform(): self.broadcasts.append("Login failed. Please check connection.") l.close() return loginDataReturned = loginDataReturnedBuffer.getvalue() l.close() #print loginDataReturned if loginDataReturned.find("<li>Your supplied username or password is invalid.</li>")!=-1: self.broadcasts.append("Uploadir authentication failed. Username/password invalid.") return else: self.broadcasts.append("Uploadir authentication successful.") #cookie = loginDataReturned.split("Set-Cookie: ")[1] #cookie = cookie.split(";",0) #print cookie c = pycurl.Curl() values = [ ("file", (c.FORM_FILE, file)) ] buf = StringIO.StringIO() c.setopt(c.URL, "http://uploadir.com/file/upload") c.setopt(c.HTTPPOST, values) c.setopt(c.COOKIEFILE, cookie_file_name) c.setopt(c.COOKIEJAR, cookie_file_name) c.setopt(c.WRITEFUNCTION, buf.write) if c.perform(): self.broadcasts.append(uploadfailed+" "+file+".") c.close() return self.result = buf.getvalue() #print self.result c.close() doc = urlparse.urlparse(self.result) self.urls.append(doc.getElementsByTagName("download")[0].childNodes[0].nodeValue) def setClipBoard(self): c = gtk.Clipboard() c.set_text('\n'.join(self.urls)) c.store() if len(self.urls) == 1: self.broadcasts.append(oneimage) elif len(self.urls) != 0: self.broadcasts.append(str(len(self.urls))+" "+multimages) if __name__ == '__main__': uploadir = Uploadir(sys.argv) Any help would be gratefully appreciated. Warm regards,

    Read the article

  • Positioning element under another

    - by Cedar Jensen
    I am not an expert web-dev so please bear with me here. I would like to display a banner style header for a page with the top part taken up by an image that is 275x116 and then a horizontal menu bar (styled using ul items) appearing at 70% from the top of the banner. How would I set this up so that the banner appears underneath my navigation? Currently, a portion of the left side of my menu bar sits underneath the image but I'd like it to be the opposite so the menu bar is above the image, some thing like this: ============= <start of header> =========== -------- | img | | | | Horizontal menu | | -------- ============= <end of header> =========== My css: #header { background-color: green; border: 0; margin: 0; padding: 0; overflow: hidden; width: 100%; height: 120px; } #logo { background: green url(images/logo.png) no-repeat scroll 0 0; margin: 0px 0px; border: 1px solid white; left: 20px; top: 20px; width: 275px; height: 116px; position: absolute; z-index: -1000; } .container { border:1px solid grey; margin-left:auto; margin-right:auto; width:960px; } My Html: <body> <div id="header"> <div id="logo"> </div> <div class="container" id="primaryNavbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Books</a></li> <li><a href="#">Shows</a></li> <li><a href="#">Movies</a></li> </ul> <div class="clear">&nbsp;</div> </div> <!-- end of container --> </div> <!-- end of header --> </body> I thought that setting the position to "absolute" for the logo element and adding in a very low z-index would achieve this but that isn't the case here. Any suggestions?

    Read the article

  • Is it ok to use <strong> in place of <b> blindly ?

    - by metal-gear-solid
    Note: I know <b> is presentational and <span style="font-weight:bold> is better way and <strong> and <em> for emphasis but my question is not regarding this. Should we convert every <b> to <strong> blindly ? many people do this they think <b> is not good as per web standards so they convert every <b> to <strong> upon site redesign, content re-population, new site design and people suggest this to others also. Dreamweaver has also given option to convert all <b> and <i> to <strong> and <em> on code paste in design view and when we use B and I Which people use blindly. And Dreamweaver(if above option is checked) and many online WYSIWYG editor give output in <strong> and <em> while button shows B and I. In my opinion it's creating misconception about <strong> and <b> When we get content from client we don't know where client want to give emphasize and where he just want to use text bold for presentation purpose.What we should do in this condition? no one has time client and we both to give time to think for each bold text, it should be in <b> or in <strong>, <i> or in <em> What are pros and cons to convert every <b> and <i> into <strong> and <em> blindly if we are saying our site is accessible? Update: remember <b> and <i> are not deprecated there are in HTML 5 specification

    Read the article

  • not able to get a processed list in jquery variable

    - by Pradyut Bhattacharya
    I have html list <ol id="newlist"> <li>Test <ol> <li>1</li> <li>2</li> <li>3</li> </ol> </li> <li>Another test <ol> <li>1</li> </ol> </li> <li>Cool Test <ol> <li>1</li> <li>2</li> </ol> </li> </ol> Now i have hidden the list using the css... #newlist li { display:none; list-style: none; } I want to display the list and the only the descendants which have greater than 1 descendants... the output should be... Test 1 2 3 Another test Cool Test 1 2 I have used jquery and able to get the output... the code i used... $("ol#newlist > li").show(); for (var i = 0; i < $("ol#newlist > li").length; i++) { if ($("ol#newlist > li:eq(" + i + ") ol > li").length > 1) $("ol#newlist > li:eq(" + i + ") ol > li").show(); } the sample page here Now i want all the list in a single variable like i can get the lis in a variable... var $li = $("ol#newlist > li"); but the code $li.add($("ol#newlist > li:eq(" + i + ") ol > li")); is not working... the sample page here Please help... Thanks Pradyut India

    Read the article

  • Stop images from wrapping when div width is to small.

    - by razass
    I have a div that contains a ul and in each li there is a picture. I have floated the pictures left to get them to line up in a straight line however once it reaches the end of the div, it wraps. I would like the pictures to continue on to the right, hidden, so that I am able to create a carousel. My code is below. The HTML <div id="container"> <div class="lfbtn"></div> <ul id="image_container"> <li class="the_image"> <img src="" /> </li> </ul> <div class="rtbtn"></div> </div> The CSS #container { width: 900px; height: 150px; margin: 10px auto; } #image_container { position: relative; left: 50px; list-style-type: none; width: 700px; height: 110px; overflow: hidden; } #image_container li { display: inline-block; padding: 7px 5px 7px 5px; float: left; } .lfbtn { background-image: url(../../img/left.gif); background-repeat: no-repeat; margin: 10px; position: relative; float: left; top: -12px; left: 50px; height: 90px; width: 25px; } .rtbtn { background-image: url(../../img/right.gif); background-repeat: no-repeat; height: 90px; width: 25px; margin: 10px; position: relative; top: -101px; left: 795px; } Thanks in advance!

    Read the article

  • siblings in jquery hide everything

    - by user2658615
    This is my html code : <div id="tabbase"> <ul> <li>a</li> <li>b</li> </ul> <div id="tabs-0"></div> <div id="tabs-1"> <div class="width50"> <h5>title1</h5> <div class="da-desc">a</div> <button>continue</button> </div> <div class="width50"> <h5>title2</h5> <div class="da-desc">b</div> <button>continue</button> </div> </div> </div> and this is CSS code : #tabbase { margin:16px; } #tabbase ul li { display:inline-block; margin:5px 0px 5px 0; background:rgb(224,224,224); padding:5px; border:1px solid rgb(153,153,153); cursor:pointer; } #tabs-0, #tabs-1 { border:1px solid rgb(153,153,153); background:rgb(255,255,255); padding:5px; margin:-5px 0 0 0; } #tabbase ul li.active { background:rgb(255,255,255) !important; } and this is jquery code : $(document).ready(function(e) { $("#tabs-1").hide(0); $("#tabbase ul li:first").addClass("active"); $("#tabbase ul li").click(function(e) { $(this).addClass("active"); $(this).siblings(this).removeClass("active"); count = $("#tabbase ul li").index(this); $('#tabs-'+count).slideDown(500).siblings(this).slideUp(500); }); }); so you can see that when you click on a tab , all tabs are gone and how can I fix this?

    Read the article

  • CSS - changing the font color for a from select option in firefox

    - by Mick
    I'm building a website for my church, and I'm teaching myself all about web design along the way. http://www.wilmingtonchurchofgod.org/contact_us.html is the link where you can see my issue. If you look at that page in firefox, and you click the select part of the form (next to, "Who would you like to contact?") you will see that when you hover over a choice, the font is white. I have tried various things to fix this, but can't find a solution. This seems to be specific to Firefox. Here is the relevant CSS. input, textarea, select, option{ padding: 6px; border: solid 1px #E5E5E5; outline: 0; font: normal 13px/100% Verdana, Tahoma, sans-serif; width: 200px; background: #FFFFFF url(images/from-grad.jpg) left top repeat-x; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px; } option{ padding:0px; } textarea { width: 400px; max-width: 400px; height: 150px; line-height: 150%; } input:hover, textarea:hover, input:focus, textarea:focus{ border-color: #C9C9C9; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px; } option:hover, option:focus, select:hover, select:focus { color: black; border-color: #C9C9C9; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.15) 0px 0px 8px; } Another side note is that I can't get any background gradient at all to show up on Google Chome (yet it does on Safari and they are supposed to use the same kit?) Any help with these two things would be greatly appreciated.

    Read the article

  • IE6 CSS tooltip not appearing

    - by Lauren
    I'm using a tooltip that works in FF, Chrome, and IE7-8, but in IE6 it doesn't appear. You can go to this page http://www.avaline.com/ Bags/ Eco-Friendly-Bags/R1500 and login with [email protected] password:test02, then hit the "add to cart" button and hover over the question marks to see (or not see) the tooltips. This is the relevant HTML and CSS: <DIV class=oewBox id=oewImpLocDiv style="BACKGROUND-IMAGE: url(/images/img/org4.gif)"> <A class=tooltip href="#"><SPAN class=""><STRONG>More than 2 imprint locations?</STRONG> Test </SPAN></A> </DIV> <style> /* Rule from element "style" attribute */ element.style { BACKGROUND-IMAGE: url(/images/img/org4.gif) } /* Rule N°8 from inline stylesheet */ .oewBox { PADDING-RIGHT: 8px; PADDING-LEFT: 40px; PADDING-BOTTOM: 16px; MARGIN: 0px 0px 6px; PADDING-TOP: 6px; BORDER-BOTTOM: #ff7c14 3px solid } /* Rule N°7 from inline stylesheet */ .oewBox { BACKGROUND-POSITION: 0px 0px; BACKGROUND-IMAGE: none; BACKGROUND-REPEAT: no-repeat } /* Rule N°11 from /site/av-files/mainstyles.css */ A:active { COLOR: #3b88c4; TEXT-DECORATION: none } /* Rule N°10 from /site/av-files/mainstyles.css */ A:hover { COLOR: #000; TEXT-DECORATION: none } /* Rule N°9 from /site/av-files/mainstyles.css */ A:visited { COLOR: #3b88c4; TEXT-DECORATION: underline } /* Rule N°8 from /site/av-files/mainstyles.css */ A:link { COLOR: #3b88c4; TEXT-DECORATION: underline } /* Rule N°7 from /site/av-files/mainstyles.css */ A { COLOR: #3b88c4; TEXT-DECORATION: underline } /* Rule N°52 from inline stylesheet */ A.tooltip { BACKGROUND: url(/images/img/question.gif) no-repeat; FLOAT: right; WIDTH: 19px; HEIGHT: 20px } /* Rule N°54 from inline stylesheet */ A.tooltip:hover SPAN { BORDER-RIGHT: #ff7c14 1px solid; BORDER-TOP: #ff7c14 1px solid; DISPLAY: inline; BACKGROUND: #ffffff; BORDER-LEFT: #ff7c14 1px solid; COLOR: #000; BORDER-BOTTOM: #ff7c14 1px solid; POSITION: absolute } /* Rule N°53 from inline stylesheet */ A.tooltip SPAN { PADDING-RIGHT: 3px; DISPLAY: none; PADDING-LEFT: 3px; FONT-WEIGHT: normal; FONT-SIZE: 11px; PADDING-BOTTOM: 2px; MARGIN-LEFT: -245px; WIDTH: 230px; PADDING-TOP: 2px } </style>

    Read the article

  • Error in playing a swf file on internet explorer

    - by Rajeev
    In the below code i get an error saying Error #2007: Parameter url must be non-null on Ineternet explorer only.What am i doing wrong here html <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="50" HEIGHT="50" id="myMovieName"> <PARAM NAME="movie" VALUE="/media/players/testsound.swf" /> <PARAM NAME="quality" VALUE="high" /> <PARAM NAME="bgcolor" VALUE="#FFFFFF" /> <EMBED href="/media/players/testsound.swf" src="/media/players/testsound.swf" flashvars="soundUrl=sound.mp3" quality=high bgcolor=#FFFFFF NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"> </EMBED> </OBJECT> mxml ; import flash.net.; import mx.controls.Alert; import mx.controls.Button; import flash.events.Event; import flash.media.Sound; import flash.net.URLRequest; private function clickhandler(event:Event):void { var musicfile:String; var s:Sound = new Sound(); s.addEventListener(Event.COMPLETE, onSoundLoaded); var req:URLRequest = new URLRequest("/opt/cloodon/site/media/players/sound.mp3"); //musicfile = stage.loaderInfo.parameters["soundUrl"]; //var req:URLRequest = new URLRequest(musicfile); s.load(req); } private function onSoundLoaded(event:Event):void { //Alert.show("1"); //var localSound:Sound = event.currentTarget as Sound; var localSound:Sound = event.target as Sound; localSound.play(); } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <!--<mx:Button id="play" label="PLAY" click="clickhandler(event)" />--> <mx:Image id="loader1" source="@Embed(source='/opt/cloodon/site/media/img/speaker.gif')" click="clickhandler(event)" /> </s:Application>

    Read the article

  • Editing/Updating one of the results in a search query.

    - by eggman20
    Hi guys. I'm creating a page that searches for an item and then be able to edit/update it. I was able to do it when it returns just one result but when it gives me multiple results I could only edit the very last item. Below is my code: ....... $dj =$_POST[djnum]; $sql= "SELECT * From dj WHERE datajack LIKE '$dj%'"; $result = mysql_query($sql); //more code in here// while ($info =mysql_fetch_array($result)) { // display the result echo "<form action=\"dj_update.php\" method=\"POST\"><input type=\"hidden\" name=\"djnumber\" value=\"".$info['datajack']."\">"; echo "<tr><td>DJ ".$info['datajack']."</td>"; echo "<td>".$info['building']."&nbsp;</td>"; echo "<td>Rm ".$info['room']."&nbsp;</td>"; echo "<td>".$info['switch']."&nbsp;</td>"; echo "<td>".$info['port']."&nbsp;</td>"; echo "<td>".$info['notes']."&nbsp;</td>"; echo "<td style=\"text-align:center;\"><input type=\"Submit\" value=\"Edit\" ></td></tr>"; } // more code here // Then this is the screen shot of the result: The idea is the user should be able to click on "Edit" and be able to edit/update that particular item. But when I click any of the Edit button I could only edit the last item. What am I missing here? Is there an easier way to do this? Thanks guys and Happy new year!

    Read the article

  • Create Menu with css and li elements compatible for all browsers.

    - by Cesar Lopez
    Hi all, I am trying to create a simple menu using li elements, but it only works on IE7, in FF and Chrome, the alignment get weird. Also the :hover and :Active only works on IE7. Could anybody give me a hit on this? I would really appreciate it. CSS: #heading{ width: 700px; height:auto; margin: 0 auto; background-color:#FFFFFF; margin-top:5px; margin-bottom:5px; display:block; } #imglogo{ float:left; } #barDescription{ float:right; } #navigation{ text-align: right; margin-top: 70px; } #navigation li{ float: right; display: block; text-align: center; list-style-type: none; } #navigation li a{ color:#A08019; background-image: url('Images/Menu1.png'); background-repeat:repeat-x; background-position: center center; text-decoration:none; font-weight:bold; display: block; height:25px; vertical-align:middle; padding-right:10px; padding-left:10px; } HTML: <div id="heading" > <div id="imglogo"> <img id="logo" src="Images/logo.png" alt="logo" /> </div> <div id="barDescription"> <h4>Especialidad en tapas,vinos y menus</h4> <h5>Restaurante de cocina creativa tradicional. Vinos y tapas</h5> </div> <ul id="navigation"> <li><a href="#">Contacto</a></li> <li><a href="#">Ubicacion</a></li> <li><a href="#">Reservas</a></li> <li><a href="#">Menus</a></li> <li><a href="#">Local</a></li> </ul> </div>

    Read the article

  • How to load the rest of the data in mysql in php

    - by user225269
    I have trouble figuring out how do I load the rest of the data in html. Here is my code: <?php $con = mysql_connect("localhost","root","nitoryolai123$%^"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("school", $con); $result = mysql_query("SELECT * FROM student WHERE IDNO='$_GET['id']'"); ?> <?php while ( $row = mysql_fetch_array($result) ) { ?> <table class="a" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3"> <tr> <form name="formcheck" method="post" action="updateact.php" onsubmit="return formCheck(this);"> <td> <table border="0" cellpadding="3" cellspacing="1" bgcolor=""> <tr> <td colspan="16" height="25" style="background:#5C915C; color:white; border:white 1px solid; text-align: left"><strong><font size="2">Update Students</td> <tr> <td width="30" height="35"><font size="2">*I D Number:</td> <td width="30"><input name="idnum" onkeypress="return isNumberKey(event)" type="text" maxlength="5" id='numbers'/ value="<?php echo $_GET['id']; ?>"></td> </tr> <tr> <td width="30" height="35"><font size="2">*Year:</td> <td width="30"><input name="yr" onkeypress="return isNumberKey(event)" type="text" maxlength="5" id='numbers'/ value="<?php echo $row["YEAR"]; ?>"></td> this is the part where I am getting the error: mysql_select_db("school", $con); $result = mysql_query("SELECT * FROM student WHERE IDNO='$_GET['id']'"); ? What do you recommend that I could do so that I can also load the ID Numbers corresponding data into the other forms?

    Read the article

  • Javascript and the Google Maps API

    - by Tiny Giant Studios
    Hiya coding Ninja's I'm in a spot of bother and my hairline is on the chopping block. When I integrated the maps API on this site, ritaknoetze.com, everything worked perfectly. However, copying that exact code for a different demo website, scarabpaper, the map doesn't show up at all? Could someone show me the ropes on what I'm doing wrong? Here's the code I got from Google itself that I modified for my WordPress theme/installation: JavaScript: <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(-34.009839, 22.78101); var myOptions = { zoom: 9, center: myLatlng, navigationControl: true, mapTypeControl: false, scaleControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var image = '<?php bloginfo('template_url')?>/assets/googlemaps_marker.png'; var myLatLng = new google.maps.LatLng(-34.009839, 22.78101); var beachMarker = new google.maps.Marker({ position: myLatLng, map: map, icon: image }); } </script> My HTML where the javascript goes: <div class="contact_container"> <div id="map_canvas"></div> <div class="clearfloat"></div> </div> My CSS for the affected divs #map_canvas { width: 880px; height: 300px; margin-left: 10px; margin-bottom: 30px; margin-top: 10px; float: left; border: 1px solid #dedcdc;} .contact_container { /*container for ALL the contact info*/ background-color: #fff; border: 1px solid #dedcdc; width: 900px; margin-top: 30px; padding: 20px; padding-bottom: 0;} Any Help would be greatly appreciated...

    Read the article

  • I have a bunch of images being shown on click via JQuery - any easy way to animate this?

    - by Cenk
    This is the (quite simple) JS code I'm using: $(document).ready(function() { $(".button-list .next").click(function() { project = $(this).parents().filter(".projektweb").eq(0); currentimg = project.find(".images-list li.current"); nextimg = currentimg.next(); firstimg = project.find(".images-list li:first"); currentimg.removeClass("current"); if (nextimg.is("li")) nextimg.addClass("current"); else firstimg.addClass("current"); return false; }); $(".button-list .prev").click(function() { project = $(this).parents().filter(".projektweb").eq(0); currentimg = project.find(".images-list li.current"); previmg = currentimg.prev(); lastimg = project.find(".images-list li:last"); currentimg.removeClass("current"); if (previmg.is("li")) previmg.addClass("current"); else lastimg.addClass("current"); return false; }); }); And this is how the HTML code for the image list looks like: <ul class="images-list"> <li class="current"><img src="img/1.jpg" alt="" /></li> <li><img src="img/1b.jpg" alt="" /></li> </ul> <ul class="button-list"> <li><a class="button prev" href="#">?</a></li> <li><a class="button next" href="#">?</a></li></ul> The CSS: .images-list { height: 460px; list-style-type:none; float:left; width: 460px; overflow:hidden; position:relative; } .images-list img { height: 460px; width: 460px; display:block; } .images-list li { display:none; } .images-list li.current { display:block; } What I'd like to do is animate the images as they come and go - right now they just appear, which is OK but a bit more eye-candy would be nice. Can anyone help me out here? It it even possible to do it this way? Thanks!!

    Read the article

  • jQuery sortColumns plugin: How to sort correctly with rowspan

    - by Thang Pham
    Following this post jQuery table sort (github link: https://github.com/padolsey/jQuery-Plugins/blob/master/sortElements/jquery.sortElements.js), I am successfully sort columns, however it does not work in the case of rowspan: For example, case like this Grape 3,096,671M 1,642,721M Apple 2,602,750M 3,122,020M When I click on the second column, it try to sort Apple 2,602,750M 1,642,721M Grape 3,096,671M 3,122,020M which as you can see is not correct, please any jQuery guru help me fix this problem. Here is my code var inverse = false; function sortColumn(index){ index = index + 1; var table = jQuery('#resultsTable'); table.find('td').filter(function(){ return jQuery(this).index() == index; }).sortElements(function(a, b){ a = convertToNum($(a).text()); b = convertToNum($(b).text()); return ( isNaN(a) || isNaN(b) ? a > b : +a > +b ) ? inverse ? -1 : 1 : inverse ? 1 : -1; },function(){ return this.parentNode; }); inverse = !inverse; } function convertToNum(str){ if(isNaN(str)){ var holder = ""; for(i=0; i<str.length; i++){ if(!isNaN(str.charAt(i))){ holder += str.charAt(i); } } return holder; }else{ return str; } } Question: 1.How do I sort this with rowspan. THE NUMBER OF ROWSPAN IS NOT ALWAYS THE SAME. The above example both Grape and Apple have rowspan of 2, but this is not always the case. 2.Can any explain this syntax: return ( isNaN(a) || isNaN(b) ? a > b : +a > +b ) ? inverse ? -1 : 1 : inverse ? 1 : -1; So I can see that if either a or b is not a number, then do string comparison otherwise do number comparison, but I dont understand the inverse ? -1 : 1 : inverse ? 1 : -1;

    Read the article

  • Looping through all attributes of a XML element in XSLT

    - by TheGNUGuy
    Hey everyone, I am trying to use <xsl:for-each select="@*"> to grab all the attributes of a given element but when i do that my <xsl:choose> statement doesn't execute. Here is the element that I'm working with: <textBox id="Airfare" value="" label="text 1"/> Here is the XSLT template I'm using: <xsl:template match="textBox"> <div> <xsl:choose> <xsl:when test="@label"> <xsl:value-of select="@label"/> </xsl:when> <xsl:otherwise> <xsl:text>No Label Defined</xsl:text> </xsl:otherwise> </xsl:choose> <xsl:element name="input"> <xsl:attribute name="type">text</xsl:attribute> <xsl:for-each select="@*"> <xsl:choose> <xsl:when test="@id"> <xsl:attribute name="name">form_<xsl:value-of select="@id"/></xsl:attribute> <xsl:attribute name="id">form_<xsl:value-of select="@id"/></xsl:attribute> </xsl:when> <xsl:when test="@label"> </xsl:when> <xsl:otherwise> <xsl:copy-of select="current()"/> </xsl:otherwise> </xsl:choose> </xsl:for-each> </xsl:element> </div> And when I generate the HTML using PHP I get this: <div>text 1<input type="text" id="Airfare" value="" label="text 1"></div> As you can see it didn't add form_ to the id attribute it didn't generate a name attribute and it didn't skip over the label attribute. Thanks for your help!

    Read the article

< Previous Page | 371 372 373 374 375 376 377 378 379 380 381 382  | Next Page >