Search Results

Search found 3857 results on 155 pages for 'teach my family'.

Page 138/155 | < Previous Page | 134 135 136 137 138 139 140 141 142 143 144 145  | Next Page >

  • Cannot pull correct data from a Javascript array into an HTML form

    - by Isaac
    I am trying to return the description value of the corresponding author name and book title(that are typed in the text boxes). The problem is that the first description displays in the text area no matter what. <h1>Bookland</h1> <div id="bookinfo"> Author name: <input type="text" id="authorname" name="authorname"></input><br /> Book Title: <input type="text" id="booktitle" name="booktitle"></input><br /> <input type="button" value="Find book" id="find"></input> <input type="button" value="Clear Info" id="clear"></input><br /> <textarea rows="15" cols="30" id="destin"></textarea> </div> JavaScript: var bookarray = [{Author: "Thomas Mann", Title: "Death in Venice", Description: "One of the most famous literary works of the twentieth century, this novella embodies" + "themes that preoccupied Thomas Mann in much of his work:" + "the duality of art and life, the presence of death and disintegration in the midst of existence," + "the connection between love and suffering and the conflict between the artist and his inner self." }, {Author: "James Joyce", Title: "A portrait of the artist as a young man", Description: "This work displays an unusually perceptive view of British society in the early 20th century." + "It is a social comedy set in Florence, Italy, and Surrey, England." + "Its heroine, Lucy Honeychurch, struggling against straitlaced Victorian attitudes of arrogance, narroe mindedness and sobbery, falls in love - while on holiday in Italy - with the socially unsuitable George Emerson." }, {Author: "E. M. Forster", Title: "A room with a view", Description: "This book is a fictional re-creation of the Irish writer'sown life and early environment." + "The experiences of the novel's young hero,unfold in astonishingly vivid scenes that seem freshly recalled from life" + "and provide a powerful portrait of the coming of age of a young man ofunusual intelligence, sensitivity and character. " }, {Author: "Isabel Allende", Title: "The house of spirits", Description: "Allende describes the life of three generations of a prominent family in Chile and skillfully combines with this all the main historical events of the time, up until Pinochet's dictatorship." }, {Author: "Isabel Allende", Title: "Of love and shadows", Description: "The whole world of Irene Beltran, a young reporter in Chile at the time of the dictatorship, is destroyed when" + "she discovers a series of killings carried out by government soldiers." + "With the help of a photographer, Francisco Leal, and risking her life, she tries to come up with evidence against the dictatorship." }] function searchbook(){ for(i=0; i &lt; bookarray.length; i++){ if ((document.getElementById("authorname").value &amp; document.getElementById("booktitle").value ) == (bookarray[i].Author &amp; bookarray[i].Title)){ document.getElementById("destin").value =bookarray[i].Description return bookarray[i].Description } else { return "Not Found!" } } } document.getElementById("find").addEventListener("click", searchbook, false)

    Read the article

  • Difference in css-positioning in windows and linux

    - by andrii
    I have a problem with rendering my html page by the same browsers in different OS. There are 3 spans and position of each span is corrected through css(position:relative). But I have found out that the page that looks correct in firefox under Linux, shows not right at the same firefox(3.5.7) under Windows OS. Linux(Left - How it should be)/Windows(right): link text And the same with other browsers. What is the cause of this problem and how is possible to solve it. My code: question.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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Question</title> <link href="css/question.css" rel="stylesheet" media="all" /> </head> <body> <div class="eventFullDate"> <span class="eventYear">2010</span> <span class="eventDate">17</span> <span class="eventMonth">FEB</span> </div> </body> </html> question.css: html, body{ font-family: Georgia; } div.eventFullDate{ height: 39px; width: 31px; float: left; border: 1px solid; border-color: #E3E3E3; background-color: #F7FFFF; } span.eventYear, span.eventDate, span.eventMonth{ color: #EC5C1D; position: relative; width: 100%; } span.eventYear{ left: 1px; bottom: 3px; font-size: 0.8em; } span.eventDate{ left: 5px; bottom: 12px; font-size: 1.3em; } span.eventMonth{ left: 3px; bottom: 15px; font-size: 0.8em; }

    Read the article

  • How can I extract paragaphs and selected lines with Perl?

    - by neversaint
    I have a text where I need to: to extract the whole paragraph under the section "Aceview summary" until the line that starts with "Please quote" (not to be included). to extract the line that starts with "The closest human gene". to store them into array with two elements. The text looks like this (also on pastebin): AceView: gene:1700049G17Rik, a comprehensive annotation of human, mouse and worm genes with mRNAs or ESTsAceView. <META NAME="title" CONTENT=" AceView: gene:1700049G17Rik a comprehensive annotation of human, mouse and worm genes with mRNAs or EST"> <META NAME="keywords" CONTENT=" AceView, genes, Acembly, AceDB, Homo sapiens, Human, nematode, Worm, Caenorhabditis elegans , WormGenes, WormBase, mouse, mammal, Arabidopsis, gene, alternative splicing variant, structure, sequence, DNA, EST, mRNA, cDNA clone, transcript, transcription, genome, transcriptome, proteome, peptide, GenBank accession, dbest, RefSeq, LocusLink, non-coding, coding, exon, intron, boundary, exon-intron junction, donor, acceptor, 3'UTR, 5'UTR, uORF, poly A, poly-A site, molecular function, protein annotation, isoform, gene family, Pfam, motif ,Blast, Psort, GO, taxonomy, homolog, cellular compartment, disease, illness, phenotype, RNA interference, RNAi, knock out mutant expression, regulation, protein interaction, genetic, map, antisense, trans-splicing, operon, chromosome, domain, selenocysteine, Start, Met, Stop, U12, RNA editing, bibliography"> <META NAME="Description" CONTENT= " AceView offers a comprehensive annotation of human, mouse and nematode genes reconstructed by co-alignment and clustering of all publicly available mRNAs and ESTs on the genome sequence. Our goals are to offer a reliable up-to-date resource on the genes, their functions, alternative variants, expression, regulation and interactions, in the hope to stimulate further validating experiments at the bench "> <meta name="author" content="Danielle Thierry-Mieg and Jean Thierry-Mieg, NCBI/NLM/NIH, [email protected]"> <!-- var myurl="av.cgi?db=mouse" ; var db="mouse" ; var doSwf="s" ; var classe="gene" ; //--> However I am stuck with the following script logic. What's the right way to achieve that? #!/usr/bin/perl -w my $INFILE_file_name = $file; # input file name open ( INFILE, '<', $INFILE_file_name ) or croak "$0 : failed to open input file $INFILE_file_name : $!\n"; my @allsum; while ( <INFILE> ) { chomp; my $line = $_; my @temp1 = (); if ( $line =~ /^ AceView summary/ ) { print "$line\n"; push @temp1, $line; } elsif( $line =~ /Please quote/) { push @allsum, [@temp1]; @temp1 = (); } elsif ($line =~ /The closest human gene/) { push @allsum, $line; } } close ( INFILE ); # close input file # Do something with @allsum There are many files like that I need to process.

    Read the article

  • Node.js + Express.js. How to RENDER less css?

    - by Paden
    Hello all, I am unable to render less css in my express workspace. Here is my current configuration (my css/less files go in 'public/stylo/'): app.configure(function() { app.set('views' , __dirname + '/views' ); app.set('partials' , __dirname + '/views/partials'); app.set('view engine', 'jade' ); app.use(express.bodyDecoder() ); app.use(express.methodOverride()); app.use(express.compiler({ src: __dirname + '/public/stylo', enable: ['less']})); app.use(app.router); app.use(express.staticProvider(__dirname + '/public')); }); Here is my main.jade file: !!! html(lang="en") head title Yea a title link(rel="stylesheet", type="text/css", href="/stylo/main.less") link(rel="stylesheet", href="http://fonts.googleapis.com/cssfamily=Droid+Sans|Droid+Sans+Mono|Ubuntu|Droid+Serif") script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js") script(src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js") body!= body here is my main.less css: @import "goodies.css"; body { .googleFont; background-color : #000000; padding : 20px; margin : 0px; > .header { border-bottom : 1px solid #BBB; background-color : #f0f0f0; margin : -25px -25px 30px -25px; /* important */ color : #333; padding : 15px; font-size : 18pt; } } AND here is my goodies.less css: .rounded_corners(@radius: 10px) { -moz-border-radius : @radius; -webkit-border-radius: @radius; border-radius : @radius; } .shadows(@rad1: 0px, @rad2: 1px, @rad3: 3px, @color: #999) { -webkit-box-shadow : @rad1 @rad2 @rad3 @color; -moz-box-shadow : @rad1 @rad2 @rad3 @color; box-shadow : @rad1 @rad2 @rad3 @color; } .gradient (@type: linear, @pos1: left top, @pos2: left bottom, @color1: #f5f5f5, @color2: #ececec) { background-image : -webkit-gradient(@type, @pos1, @pos2, from(@color1), to(@color2)); background-image : -moz-linear-gradient(@color1, @color2); } .googleFont { font-family : 'Droid Serif'; } Cool deal. Now: I have installed less via npm and I had heard from another post that @imports should reference the .css not the .less. In any case, I have tried the combinations of switching .less for .css in the jade and less files with no success. If you can help or have the solution I'd greatly appreciate it. Note: The jade portion works fine if I enter any ol' .css. Note2: The less compiles if I use lessc via command line.

    Read the article

  • Collapse span when input button is hidden

    - by Evan
    I have a style that wraps around an input button, so the button can be styled very creatively. When the button is hidden in .Net, i would like the style to collapse so it renders like its hidden as well. What the style does, as a result of no value in the button or its hidden, is it keeps a small shape. Click to see a demo: http://media.apus.edu/it/evan-testing/button.htm <style> .button { cursor:pointer; text-decoration:none; background:url(button_bg.gif) no-repeat right top; padding-right:10px; display:inline-block; line-height:29px; height:29px; font-size:12px; color:#FFFFFF; font-weight:bold; } span.button { vertical-align: middle; } .button span { background:url(button_bg.gif) no-repeat left top; padding-left:10px; line-height:20px; height:29px; display:inline-block; } .button span span { background:transparent; padding:0; font-size:12px; } .button span input { cursor:pointer; font-weight:bold; background:transparent; border:0; padding-top:.4em; font-size:12px; font-family:verdana; color:#FFFFFF; } .button:hover { background-position:right -39px; } .button:hover span { background-position:left -39px; } .button:active { background-position:right -78px; } .button:active span { background-position:left -78px; } </style> Input button wrapped in a span with no value: <span class="button"><span><input type="button" value=""></span></span> <P> Input button wrapped in a span with a value: <span class="button"><span><input type="button" value="test"></span></span> <P> Span with no data value: <span class="button"><span></span>

    Read the article

  • z-index issues with jQuery Tabs, Superfish Menu

    - by NightMICU
    Hi all, For the life of me I cannot get my Superfish menu to stop hiding behind my jQuery UI tabs in IE 7. I have read the documentation out there, have tried changing z-index values and tried the bgIframe plugin, although I am not sure if I am implementing it correctly (left out in my example below, using Supersubs). Here is the Javascript I am using for Superfish - using the Supersubs plugin: $(document).ready(function() { $("ul.sf-menu").supersubs({ minWidth: 12, // minimum width of sub-menus in em units maxWidth: 27, // maximum width of sub-menus in em units extraWidth: 1 // extra width can ensure lines don't sometimes turn over // due to slight rounding differences and font-family }).superfish({ delay: 1000, // one second delay on mouseout animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation speed: 'medium' // faster animation speed }); }); And here is the structure of my page: <div id="page-container"> <div id="header"></div> <div id="nav-admin"> <!-- This is where Superfish goes --> </div> <div id="header-shadow"></div> <div id="content"> <div id="admin-main"> <div id="tabs"> <ul> <li><a href="#tabs-1">Tab 1</a></li> <li><a href="#tabs-2">Tab 2</a></li> </ul> <div id="tabs-1"> <!-- Content for Tab 1 --> </div> <div id="tabs-2"> <!-- Content for Tab 2 --> </div> </div> </div> </div> <div id="footer-shadow"></div> <div id="footer"> <div id="alt-nav"> <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/altnav.inc.php'; //CHANGE WHEN UPLOADED TO MATCH DOCUMENT ROOT ?> </div> </div> </div>

    Read the article

  • How can I move the close button to the top-right corner of the box in slimbox (jQuery)

    - by janoChen
    I want to have my button in the top-right corner, I tried position: absolute, but I think the position of the box is not relative so I can't use top: 0;. Any suggestions? CSS: /* SLIMBOX */ #lbOverlay { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; cursor: pointer; } #lbCenter, #lbBottomContainer { position: absolute; z-index: 9999; overflow: hidden; background-color: #fff; } .lbLoading { background: #fff url(slimbox2/loading.gif) no-repeat center; } #lbImage { position: absolute; left: 0; top: 0; border: 10px solid #fff; background-repeat: no-repeat; } #lbPrevLink, #lbNextLink { display: block; position: absolute; top: 0; width: 50%; outline: none; } #lbPrevLink { left: 0; } #lbPrevLink:hover { background: transparent url(slimbox2/prevlabel.gif) no-repeat 0 15%; } #lbNextLink { right: 0; } #lbNextLink:hover { background: transparent url(slimbox2/nextlabel.gif) no-repeat 100% 15%; } #lbBottom { font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; font-size: 10px; color: #666; line-height: 1.4em; text-align: left; border: 10px solid #fff; border-top-style: none; } #lbCloseLink { display: block; float: right; width: 31px; height: 32px; background: transparent url(slimbox2/closelabel.gif) no-repeat center; margin: 5px 0; outline: none; } #lbCloseLink:hover { background: transparent url(slimbox2/closelabel_hover.gif) no-repeat center; border-bottom: 0px; } #lbCaption, #lbNumber { margin-right: 71px; } #lbCaption { font-weight: bold; }

    Read the article

  • jQuery CSS plugin that returns computed style of element to pseudo clone that element?

    - by Keith Bentrup
    I'm looking for a way using jQuery to return an object of computed styles for the 1st matched element. I could then pass this object to another call of jQuery's css method. For example, with width, I can do the following to make the 2 divs have the same width: $('#div2').width($('#div1').width()); It would be nice if I could make a text input look like an existing span: $('#input1').css($('#span1').css()); where .css() with no argument returns an object that can be passed to .css(obj). (I can't find a jQuery plugin for this, but it seems like it should exist. If it doesn't exist, I'll turn mine below into a plugin and post it with all the properties that I use.) Basically, I want to pseudo clone certain elements but use a different tag. For example, I have an li element that I want to hide and put an input element over it that looks the same. When the user types, it looks like they are editing the element inline. I'm also open to other approaches for this pseudo cloning problem for editing. Any suggestions? Here's what I currently have. The only problem is just getting all the possible styles. This could be a ridiculously long list. jQuery.fn.css2 = jQuery.fn.css; jQuery.fn.css = function() { if (arguments.length) return jQuery.fn.css2.apply(this, arguments); var attr = ['font-family','font-size','font-weight','font-style','color', 'text-transform','text-decoration','letter-spacing','word-spacing', 'line-height','text-align','vertical-align','direction','background-color', 'background-image','background-repeat','background-position', 'background-attachment','opacity','width','height','top','right','bottom', 'left','margin-top','margin-right','margin-bottom','margin-left', 'padding-top','padding-right','padding-bottom','padding-left', 'border-top-width','border-right-width','border-bottom-width', 'border-left-width','border-top-color','border-right-color', 'border-bottom-color','border-left-color','border-top-style', 'border-right-style','border-bottom-style','border-left-style','position', 'display','visibility','z-index','overflow-x','overflow-y','white-space', 'clip','float','clear','cursor','list-style-image','list-style-position', 'list-style-type','marker-offset']; var len = attr.length, obj = {}; for (var i = 0; i < len; i++) obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]); return obj; } Edit: I've now been using the code above for awhile. It works well and behaves exactly like the original css method with one exception: if 0 args are passed, it returns the computed style object. As you can see, it immediately calls the original css method if that's the case that applies. Otherwise, it gets the computed styles of all the listed properties (gathered from Firebug's computed style list). Although it's getting a long list of values, it's quite fast. Hope it's useful to others.

    Read the article

  • CSS Footer bar bottom center issue

    - by StealthRT
    Hey all, i am trying to get my bottom bar to center on the screen but i am unable to do so. <style type="text/css"> body { background: #fffff; margin: 0; padding: 0; font: 10px normal Verdana, Arial, Helvetica, sans-serif; } * {margin: 0; padding: 0; outline: none;} #bottomBar { position: fixed; bottom: 0px; left: 0px; z-index: 9999; background: #e3e2e2; border: 1px solid #c3c3c3; border-bottom: none; width: 500px; min-width: 500px; margin: 0px auto; -moz-opacity:.90; filter:alpha(opacity=90); opacity:.90; } *html #bottomBar {margin-top: -1px; position: absolute; top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));} #bottomBar ul {padding: 0; margin: 0;float: left;width: 100%;list-style: none;border-top: 1px solid #fff;} #bottomBar ul li{padding: 0; margin: 0;float: left;position: relative;} #bottomBar ul li a{padding: 5px;float: left;text-indent: -9999px;height: 16px; width: 16px;text-decoration: none;color: #333;position: relative;} html #bottomBar ul li a:hover{ background-color: #fff; } a.PDF{background: url(http://www.xxx.com/img/pdficon.png) no-repeat center center; } </style> <div id="bottomBar"> <ul id="mainpanel"> <li style="padding-top:5px; font-family:Arial, Helvetica, sans-serif; padding-left: 5px;">First time here? Be sure to check out the "this" button above or download the PDF here -></li> <li><a href="http://www.xxx.com" class="PDF">Download PDF <small>Download PDF</small></a></li> </ul> </div> Thanks! David

    Read the article

  • CSS class not having an effect on a div

    - by ETFairfax
    Hi Peeps, The following is an section of my css file plus some HTML. Can anyone tell me when I put class="containerHeader selected" (as is on Test Header A) the background colour is not being set to Red??? Cheers, ET Fairfax. div#builderContainer { margin-top: 15px; width: 390px; height: 700px; border: solid 0px #CCCCCC; background-repeat: no-repeat; } div#builderContainer .container { display: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /* Corner radius */ border: solid 1px #999999; } div#builderContainer .container div:hover { background-color: #EEEEEE; } div#builderContainer .containerHeader { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #93c3cd url(images/ui-bg_diagonals-small_50_93c3cd_40x40.png) 50% 50% repeat; border-bottom: solid 0px #999999; margin: 0px; margin-top: 25px; padding: 10px; /* display: none; */ border: solid 1px #999999; font-weight: bold; font-family: Verdana; background-color: #FFF; cursor: pointer; vertical-align: middle; } div#builderContainer .containerHeader:hover { background: #ccd232 url(images/ui-bg_diagonals-small_75_ccd232_40x40.png) 50% 50% repeat; } div#builderContainer .containerHeader:active { background: #db4865 url(images/ui-bg_diagonals-small_40_db4865_40x40.png) 50% 50% repeat; } div#builderContainer .containerHeader .selected { background-color: Red; } <div id="builderContainer"> <div class="containerHeader selected" id="CHA">Test Header A</div> <div class="container" id="CA"></div> <div class="containerHeader" id="CHB">Test Header B</div> <div class="container" id="CB"></div> </div>

    Read the article

  • iGoogle Stack Overflow Gadget [closed]

    - by Charango
    Since SO's question database is becoming an excellent first point of call for finding answers to coding problems, some people (like me) might like to be able to fire up searches from their iGoogle home page, among the other searches you might launch from there. I've created a very simple gadget to do this, and put the source below. My hope is that this might provide a foundation on which community members with better ideas for performing this function, or ideas for enhancing it, can update it. Perhaps we could make it configurable to search via a site scope search from Google and / or a question search, for instance. I've hosted and registered this first version but if anyone makes changes and can host a new version / new pics elsewhere, please feel free. <?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="Stack Overflow Search" author="Community Wiki" author_email="[email protected]" author_affiliation="Stack Overflow" author_location="The Internet" author_aboutme="All sorts" author_link="http://stackoverflow.com" author_quote="Hofstadter's Law: It always takes longer than you expect, even when you take into account Hofstadter's Law." description="Stack Overflow is rapidly becoming one of the best resources for finding answers to your programming questions. This gadget adds a question search box to your iGoogle homepage" screenshot="http://arkios-solutions.com/misc/sogadget/SOGadget.png" thumbnail="http://arkios-solutions.com/misc/sogadget/SOGadget_Thumbnail.png" singleton="true" title_url="http://stackoverflow.com" /> <Content type="html"><![CDATA[ <img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" alt="Stackoverflow Logo"/> <div style="font-family:arial;font-size:0.8em;"> This gadget allows you to search the Stack Overflow question database. </div> <form name='SOQueryForm' action="http://stackoverflow.com/search" method="get" target="new"> <p>Your question: <input type='text' size='34' name='q' /></p> <p><input type='submit' value='Go' /></p> </form> ]]> </Content> </Module> The source / installable gadget xml are also hosted here.

    Read the article

  • Jquery Tools Overlay call on javascript function

    - by user342944
    Hi Guys, I have a jquery overlay window in my html alongwith a button to activate here is the code. <!-- Validation Overlay Box --> <div class="modal" id="yesno" style="top: 100px; left: 320px; position: relative; display: none; z-index: 0; margin-top: 100px;"> <h2> &nbsp;&nbsp;Authentication Failed</h2> <p style="font-family:Arial; font-size:small; text-align:center"> Ether your username or password has been entered incorrectly. Please make sure that your username or password entered correctly... </p> <!-- yes/no buttons --> <p align="center"> <button class="close"> OK </button> </p> </div> Here is the Jquery tools Script <SCRIPT> $(document).ready(function() { var triggers = $(".modalInput").overlay({ // some mask tweaks suitable for modal dialogs mask: { color: '#a2a2a2', loadSpeed: 200, opacity: 0.9 }, closeOnClick: false }); var buttons = $("#yesno button").click(function(e) { // get user input var yes = buttons.index(this) === 0; // do something with the answer triggers.eq(0).html("You clicked " + (yes ? "yes" : "no")); }); $("#prompt form").submit(function(e) { // close the overlay triggers.eq(1).overlay().close(); // get user input var input = $("input", this).val(); // do something with the answer triggers.eq(1).html(input); // do not submit the form return e.preventDefault(); }); }); And here how its called upon clicking on a button or a hyperlink "<BUTTON class="modalInput" rel="#yesno">You clicked no</BUTTON>" All i want is I dont want to show the overlay on clicking on button or through a link. Is it possible to call it through a javascript function like "showOverlay()" ??

    Read the article

  • jquery css menu not selecting the active link

    - by Ronedog
    What is wrong with this and how could I fix it. I have css menu (horizontal) that I want the background and font to be changed when one of the items is selected. I found another post that gave me some jquery code to help make it work, and I thought I had it coded right, but when I click on an item to change its class it adds the class, but the background and font stay the same? Any ideas here? Heres the HTML <ul id="menu_nav" class="buttons"> <li> <a href="#" onclick="' . $menu_path . '">Item 1</a> </li> <li> <a href="#" onclick="' . $menu_path . '">Item 2</a> </li> <li> <a href="#" onclick="' . $menu_path . '">Item 3</a> </li> </ul> Heres the CSS: ul#menu_nav { float:left; width:790px; padding:0; margin:0; list-style-type:none; background-color:#000099; } ul#menu_nav a { float:left; text-decoration:none; color:white; background-color:#000099; padding:0.2em 0.6em; border-right:1px solid #CCCCCC; font-family: Tahoma; font-size: 11px; font-style: normal; font-weight: bold; position: relative; height: 21px; line-height:1.85em; } ul#menu_nav a:hover { background-color:#F1F4FE; color:#000099; border-top:1px solid #CCCCCC; } ul#menu_nav li {display:inline;} .selected { background-color:#F1F4FE; color:#000099; border-top:1px solid #CCCCCC; } Here's the Jquery: $(function(){ $(".buttons li>a").click(function(){ $(this).parent().addClass('selected'). // <li> siblings().removeClass('selected'); }); });

    Read the article

  • 3-row layout, expanding middle, min-height:100% so footer is at bottom when there is minimal content

    - by David Lawson
    How would I change this to make the middle div expand vertically to fill the white space? <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body,td,th { font-family: Tahoma, Geneva, Verdana, sans-serif; } html,body { margin:0; padding:0; height:100%; /* needed for container min-height */ } #container { position:relative; /* needed for footer positioning*/ margin:0 auto; /* center, not in IE5 */ width:100%; height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ } #header { height: 150px; border-bottom: 2px solid #ff8800; position: relative; background-color: #c97c3e; } #middle { padding-right: 90px; padding-left: 90px; padding-top: 35px; padding-bottom: 43px; background-color: #0F9; } #footer { border-top: 2px solid #ff8800; background-color: #ffd376; position:absolute; width:100%; bottom:0; /* stick to bottom */ } </style> </head> <body> <div id="container"> <div id="header"> Header </div> <div id="middle"> Middle </div> <div id="footer"> Footer </div> </div> </body> </html>

    Read the article

  • create text inside a rectangle using inkscape

    - by mr calendar
    I've put some text inside a rectangle using inkscape so the tree is like <svg:rect><svg:text><svg:tspan>text.... The problem is, I can't see the text. I've tried fiddling with the opacity of the rect to no avail. There should be a way of doing this from the UI? Edit example as requested <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="184.25197" height="262.20471" id="svg2" sodipodi:version="0.32" inkscape:version="0.46" version="1.0" sodipodi:docname="ex1.svg" inkscape:output_extension="org.inkscape.output.svg.inkscape"> <defs id="defs4"> <inkscape:perspective sodipodi:type="inkscape:persp3d" inkscape:vp_x="0 : 526.18109 : 1" inkscape:vp_y="0 : 1000 : 0" inkscape:vp_z="744.09448 : 526.18109 : 1" inkscape:persp3d-origin="372.04724 : 350.78739 : 1" id="perspective10" /> </defs> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" gridtolerance="10000" guidetolerance="10" objecttolerance="10" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.64" inkscape:cx="195.9221" inkscape:cy="335.3072" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" inkscape:window-width="640" inkscape:window-height="675" inkscape:window-x="44" inkscape:window-y="44" /> <metadata id="metadata7"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> </cc:Work> </rdf:RDF> </metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"> <rect style="opacity:0.25480766;fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:12.94795799;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="rect2383" width="150.87796" height="84.226181" x="18.221733" y="39.557121"> <text xml:space="preserve" style="font-size:56.0331955px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans" x="44.815186" y="114.0088" id="text2385" transform="scale(1.0054479,0.9945816)"><tspan sodipodi:role="line" id="tspan2387" x="44.815186" y="114.0088">text</tspan></text> </rect> </g> </svg> I'd expect to be able to see this in inkscape. The workaround is to put text on a layer above the box (the intent is that the box obscures the layers below it) and not try and get clever with nested tags. Shame it doesn't work though.

    Read the article

  • dropdown under a nav button css/html

    - by MannfromReno
    I have a navcontainer with buttons in the container. I need to make a dropdown list for only one of the buttons. How would this be accomplished with CSS/HTML. Here is my code: HTML: <div id="navcontainer"> <a href="/home.html" class="button" style="width: 115px">About Us</a> <a href="/quote.html" class="button" style="width: 170px">Request a Quote</a> <a href="/affiliates.html" class="button" style="width: 115px">Affiliates</a> <a href="/pricing.html" class="button" style="width: 170px">Pricing & Plans</a> <a href="/addservices.html" class="button" style="width: 190px">Additional Services</a> <a href="/service.html" class="button" style="width: 165px">Service Details</a> <a href="/watering.html" class="button" style="width: 108px">Watering</a> </div> CSS: #navcontainer { float: right; width: 1040px; height: 45px; text-align: center; line-height: 45px; color: #fff; margin-bottom: 6px; } .button { text-align: center; background: #226426; color: #fff; width: 100px; height: 45px; float: left; text-decoration: none; font-family: Arial, sans-serif; font-size: 15px; font-weight: bold; border-right: solid 1px #91b293; border-top: solid 1px #91b293; border-bottom: solid 1px #91b293; } Do I need to make this into a ul or can I keep it as is, and just add a dropdown to the Services button? Thanks for your help.

    Read the article

  • understanding logic of dijit css and styles

    - by Tom
    Hi, I am trying to use dijit.InlineEditBox. I have put the following code in my HTML, using the example in the dojo docs: <script type="text/javascript"> dojo.require("dijit.InlineEditBox"); dojo.require("dojo.parser"); dojo.require("dijit.form.TextBox"); function editableHeaderOnChange(id, arg){ alert("details changed with id " + id + " and arguments "+arg); } </script> ... <span id="myText" dojoType="dijit.InlineEditBox" onChange="editableHeaderOnChange(this.id,arguments[0])" autoSave="true" title="My Text">click to edit me</span> I am using tundra theme. It works, however it doesn't look so good. The widget has its own style, which doesn't fit my CSS. I used firebug to locate the source of the problem. The widget creates many nested div/span elements, each has it's own style (element style in firebug): <span id="dijit__InlineEditor_0" class="dijitReset dijitInline" style="margin: 0px; position: absolute; visibility: hidden; display: block; opacity: 0;" ...> <input type="text" autocomplete="off" class="dijit dijitReset dijitLeft dijitTextBox" id="dijit_form_TextBox_0" style="line-height: 20px; font-weight: 400; font-family: Trebuchet MS,Helvetica,Arial,Verdana; font-size: 14.5167px; font-style: normal; width: 100%;"> ...> </span></span> (showing only the relevant parts...) to get the visual that I want, which will not break to a newline, I need to change the width of dijit_form_TextBox_0** to 50%, and the positioning of dijit__InlineEditor_0 to display: inline**; or to change the positioning of everything (most of my layout is floated, so position: absolute doesn't fit) I cannot address those span elements in my css to change the properties, because the element.style has priority, of course. I don't understand the logic in this system... why is dijit generating the style directly inside the element? how can I change these properties? Thanks Tom

    Read the article

  • How to display subversion URL for the Project with jenkins email-ext plugin?

    - by kamal
    Here is the jelly script i am using: <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define"> <STYLE>BODY, TABLE, TD, TH, P { font-family:Verdana,Helvetica,sans serif; font-size:11px; color:black; } h1 { color:black; } h2 { color:black; } h3 { color:black; } TD.bg1 { color:white; background-color:#0000C0; font-size:120% } TD.bg2 { color:white; background-color:#4040FF; font-size:110% } TD.bg3 { color:white; background-color:#8080FF; } TD.test_passed { color:blue; } TD.test_failed { color:red ; } TD.console { font-family:Courier New; }</STYLE> <BODY> <j:set var="spc" value="&amp;nbsp;&amp;nbsp;" /> <!-- GENERAL INFO --> <TABLE> <TR> <TD align="right"> <j:choose> <j:when test="${build.result=='SUCCESS'}"> <IMG SRC="${rooturl}static/e59dfe28/images/32x32/blue.gif" /> </j:when> <j:when test="${build.result=='FAILURE'}"> <IMG SRC="${rooturl}static/e59dfe28/images/32x32/red.gif" /> </j:when> <j:otherwise> <IMG SRC="${rooturl}static/e59dfe28/images/32x32/yellow.gif" /> </j:otherwise> </j:choose> </TD> <TD valign="center"> <B style="font-size: 200%;">BUILD ${build.result}</B> </TD> </TR> <TR> <TD>Build URL</TD> <TD> <A href="${rooturl}${build.url}">${rooturl}${build.url}</A> </TD> </TR> <TR> <TD>Project:</TD> <TD>${project.name}</TD> </TR> <TR> <TD>Date of build:</TD> <TD>${it.timestampString}</TD> </TR> <TR> <TD>Build duration:</TD> <TD>${build.durationString}</TD> </TR> <TR> <!-- BRANCH --> <TD>Subversion Repo:</TD> <TD>${build.scm}</TD> </TR> <tr> <td>Build Cause:</td> <td> <j:forEach var="cause" items="${build.causes}">${cause.shortDescription} </j:forEach> </td> </tr> </TABLE> <BR /> <!-- CHANGE SET --> <j:set var="changeSet" value="${build.changeSet}" /> <j:if test="${changeSet!=null}"> <j:set var="hadChanges" value="false" /> <TABLE width="100%"> <TR> <TD class="bg1" colspan="2"> <B>CHANGES</B> </TD> </TR> <j:forEach var="cs" items="${changeSet}" varStatus="loop"> <j:set var="hadChanges" value="true" /> <j:set var="aUser" value="${cs.hudsonUser}" /> <TR> <TD colspan="2" class="bg2">${spc}Revision <B>${cs.commitId?:cs.revision?:cs.changeNumber}</B>by <B>${aUser!=null?aUser.displayName:cs.author.displayName}:</B> <B>(${cs.msgAnnotated})</B></TD> </TR> <j:forEach var="p" items="${cs.affectedFiles}"> <TR> <TD width="10%">${spc}${p.editType.name}</TD> <TD>${p.path}</TD> </TR> </j:forEach> </j:forEach> <j:if test="${!hadChanges}"> <TR> <TD colspan="2">No Changes</TD> </TR> </j:if> </TABLE> <BR /> </j:if> <!-- ARTIFACTS --> <j:set var="artifacts" value="${build.artifacts}" /> <j:if test="${artifacts!=null and artifacts.size()&gt;0}"> <TABLE width="100%"> <TR> <TD class="bg1"> <B>BUILD ATRIFACTS</B> </TD> </TR> <TR> <TD> <j:forEach var="f" items="${artifacts}"> <li> <a href="${rooturl}${build.url}artifact/${f}">${f}</a> </li> </j:forEach> </TD> </TR> </TABLE> <BR /> </j:if> <!-- MAVEN ARTIFACTS --> <j:set var="mbuilds" value="${build.moduleBuilds}" /> <j:if test="${mbuilds!=null}"> <TABLE width="100%"> <TR> <TD class="bg1"> <B>BUILD ATRIFACTS</B> </TD> </TR> <j:forEach var="m" items="${mbuilds}"> <TR> <TD class="bg2"> <B>${m.key.displayName}</B> </TD> </TR> <j:forEach var="mvnbld" items="${m.value}"> <j:set var="artifacts" value="${mvnbld.artifacts}" /> <j:if test="${artifacts!=null and artifacts.size()&gt;0}"> <TR> <TD> <j:forEach var="f" items="${artifacts}"> <li> <a href="${rooturl}${mvnbld.url}artifact/${f}">${f}</a> </li> </j:forEach> </TD> </TR> </j:if> </j:forEach> </j:forEach> </TABLE> <BR /> </j:if> <!-- JUnit TEMPLATE --> <j:set var="junitResultList" value="${it.JUnitTestResult}" /> <j:if test="${junitResultList.isEmpty()!=true}"> <TABLE width="100%"> <TR> <TD class="bg1" colspan="2"> <B>${project.name} Functional Tests</B> </TD> </TR> <j:forEach var="junitResult" items="${it.JUnitTestResult}"> <j:forEach var="packageResult" items="${junitResult.getChildren()}"> <TR> <TD class="bg2" colspan="2">Name: ${packageResult.getName()} Failed: ${packageResult.getFailCount()} test(s), Passed: ${packageResult.getP assCount()} test(s), Skipped: ${packageResult.getSkipCount()} test(s), Total: ${packageResult.getPassCount()+packageResult.getFailCount()+packageResult.getSkipCount()} test(s)</TD> </TR> <j:forEach var="failed_test" items="${packageResult.getFailedTests()}"> <TR bgcolor="white"> <TD class="test_failed" colspan="2"> <B> <li>Failed: ${failed_test.getFullName()} <br /> <pre> ${failed_test.errorDetails} </pre></li> </B> </TD> </TR> <TR bgcolor="white"> <TD class="test_failed" colspan="2"> <B> <li>StackTrace: ${failed_test.getFullName()} <br /> <pre> ${failed_test.errorStackTrace} </pre></li> </B> </TD> </TR> </j:forEach> </j:forEach> </j:forEach> </TABLE> <BR /> </j:if> <!-- COBERTURA TEMPLATE --> <j:set var="coberturaAction" value="${it.coberturaAction}" /> <j:if test="${coberturaAction!=null}"> <j:set var="coberturaResult" value="${coberturaAction.result}" /> <j:if test="${coberturaResult!=null}"> <table width="100%"> <TD class="bg1" colspan="2"> <B>Cobertura Report</B> </TD> </table> <table width="100%"> <TD class="bg2" colspan="2"> <B>Project Coverage Summary</B> </TD> </table> <table border="1px" class="pane"> <tr> <td>Name</td> <j:forEach var="metric" items="${coberturaResult.metrics}"> <td>${metric.name}</td> </j:forEach> </tr> <tr> <td>${coberturaResult.name}</td> <j:forEach var="metric" items="${coberturaResult.metrics}"> <td data="${coberturaResult.getCoverage(metric).percentageFloat}">${coberturaResult.getCoverage(metric).percentage}% (${coberturaResult.ge tCoverage(metric)})</td> </j:forEach> </tr> </table> <j:if test="${coberturaResult.sourceCodeLevel}"> <h2>Source</h2> <j:choose> <j:when test="${coberturaResult.sourceFileAvailable}"> <div style="overflow-x:scroll;"> <table class="source"> <thead> <tr> <th colspan="3">${coberturaResult.relativeSourcePath}</th> </tr> </thead>${coberturaResult.sourceFileContent}</table> </div> </j:when> <j:otherwise> <p> <i>Source code is unavailable</i> </p> </j:otherwise> </j:choose> </j:if> <j:forEach var="element" items="${coberturaResult.childElements}"> <j:set var="childMetrics" value="${coberturaResult.getChildMetrics(element)}" /> <table width="100%"> <TD class="bg2" colspan="2">Coverage Breakdown by ${element.displayName}</TD> </table> <table border="1px" class="pane sortable"> <tr> <td>Name</td> <j:forEach var="metric" items="${childMetrics}"> <td>${metric.name}</td> </j:forEach> </tr> <j:forEach var="c" items="${coberturaResult.children}"> <j:set var="child" value="${coberturaResult.getChild(c)}" /> <tr> <td>${child.xmlTransform(child.name)}</td> <j:forEach var="metric" items="${childMetrics}"> <j:set var="childResult" value="${child.getCoverage(metric)}" /> <j:choose> <j:when test="${childResult!=null}"> <td data="${childResult.percentageFloat}">${childResult.percentage}% (${childResult})</td> </j:when> <j:otherwise> <td data="101">N/A</td> </j:otherwise> </j:choose> </j:forEach> </tr> </j:forEach> </table> </j:forEach> </j:if> <BR /> </j:if> <!-- HEALTH TEMPLATE --> <div class="content"> <j:set var="healthIconSize" value="16x16" /> <j:set var="healthReports" value="${project.buildHealthReports}" /> <j:if test="${healthReports!=null}"> <h1>Health Report</h1> <table> <tr> <th>W</th> <th>Description</th> <th>Score</th> </tr> <j:forEach var="healthReport" items="${healthReports}"> <tr> <td> <img src="${rooturl}${healthReport.getIconUrl(healthIconSize)}" /> </td> <td>${healthReport.description}</td> <td>${healthReport.score}</td> </tr> </j:forEach> </table> <br /> </j:if> </div> <!-- CONSOLE OUTPUT --> <j:getStatic var="resultFailure" field="FAILURE" className="hudson.model.Result" /> <j:if test="${build.result==resultFailure}"> <TABLE width="100%" cellpadding="0" cellspacing="0"> <TR> <TD class="bg1"> <B>CONSOLE OUTPUT</B> </TD> </TR> <j:forEach var="line" items="${build.getLog(100)}"> <TR> <TD class="console">${line}</TD> </TR> </j:forEach> </TABLE> <BR /> </j:if> </BODY> </j:jelly> <!-- BRANCH --> <TD>Subversion Repo:</TD> <TD>${build.scm}</TD> </TR> does not work, and i am not sure which argument to use with build object to get subversion url. outside jelly script, i can get the Subversion URL, using: Subversion URL: ${ENV, var="SVN_URL"}

    Read the article

  • Wordpress Template HTML CSS Layout Confusion

    - by Jess McKenzie
    I am having huge confusion with a template that I have purchased and I am trying to modify to handle a widget contact form. I am getting close with this but I have now muddled up the CSS or I have a feeling every page has a different CSS structure. The General Layout: What I Manage To Get: HTML View Source: <div id="innerright"> <div id="home" class="page"> <div id="homeslides"> <div class="welcomeslide"> <h1 class="large">Welcome</h1> </div> </div><!-- end home slides --> </div><!-- end page --> <div id="portfolio" class="page"> <div class="verticalline"> <div class="scrollprevnext"></div> </div> <div class="pageheader"> <h3><span>P</span>ortfolio</h3> </div><!--end pageheader --> <div id="portfolioscroller" class="scrollerenabledpage"> <div class="content"> <h5>Recent Work</h5> <ul class="thumb"> <li><a rel="precision_gallery" href="" title=""><img alt="" src="" /></a></li> </ul> </div> </div><!--end v scroll inner--> </div><!-- end page --> <div id="contact" class="page"> <div class="verticalline"> <div class="scrollprevnext"></div> </div> <div class="pageheader"> <h3><span>C</span>ontact</h3> </div><!--end pageheader --> <div id="contactscroller"> <h5>Get In Touch</h5> <div id="contactform">content</div> </div><!--end v scroll inner--> </div><!-- end page --> </div><!--end innerright--> CSS: CSS index.php: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css" /> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" /> <?php // jquery will be included by wp_head function as well as scripts and styles by third party plugins wp_head(); ?> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/plugins.js"></script> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script> <?php // background image if one has been set via options if (function_exists('get_option_tree')) { $background_image = get_option_tree('precision_background_image'); //$background_image = ''; $background_color = get_option_tree('precision_background_color'); if ($background_color != '') { echo '<style>body { background-color:'.$background_color.'; }</style>'; } } ?> <script type="text/javascript"> jQuery(document).ready(function($) { $('.page').each(function(index, element) { $(this).css('left', index * 500); }); <?php // if background is set via the OptionTree then load it first if ($background_image != '') { ?> $.vegas({ src:'<?php echo $background_image; ?>', fade:1000, complete:function() { $("#wrapper").fadeIn(1000); $("#bgpanel").fadeIn(1000); $('#mainslide').crossSlide( { speed: 15, fade: 1 }, [ <?php echo $slides; ?> ] ) $('#homeslides').bxSlider({ mode: 'fade', auto: true, controls:false, speed:1000, pause:5000 }); } }); <?php } else { // if no background has been set then fade-in the page ?> $("#wrapper").fadeIn(1000); $("#bgpanel").fadeIn(1000); $('#mainslide').crossSlide( { speed: 15, fade: 1 }, [ //ENTER YOUR MAIN SLIDESHOW IMAGES HERE\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ <?php echo $slides; ?> ] ) $('#homeslides').bxSlider({ mode: 'fade', auto: true, controls:false, speed:1000, pause:5000 }); <?php } ?> //BX SLIDER INNER PAGE SCROLLERS//////////////////////// $('.scrollerenabledpage').each(function(index, element) { $('#' + $(this).attr('id')).bxSlider({ mode: 'vertical', easing: 'easeInOutQuint', auto: false, controls: true, prevImage:'<?php echo get_template_directory_uri(); ?>/images/up.png', nextImage:'<?php echo get_template_directory_uri(); ?>/images/down.png', infiniteLoop: false, hideControlOnEnd: true, pager: true, pagerType:'short', pagerShortSeparator:'of', speed:800, }); }); //END BX SLIDER INNER PAGE SCROLLERS///////////////// $('#submit').click(function(e) { e.preventDefault(); $('form').submit(); }); // contact form $('form').submit(function(e) { $('#main').append('<img src="<?php echo get_template_directory_uri(); ?>/images/loader.gif" class="loaderIcon" alt="Loading..." />'); $.post("<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php", {action:'precision_contact_form_handler', uname:$('input#uname').val(), uemail:$('input#uemail').val(), ucomments:$('textarea#ucomments').val()}, function(data) { $('#main img.loaderIcon').fadeOut(1000); if (data.status == "success") { $('#response').html("Forum has been successfully submitted."); } else { if (data.response != '') { $('#response').html(data.response); } else { $('#response').html("An error occurred while submitting the form. Please try again."); } } }, "json"); return false; }); }); //hides contact form labels when a field gets focus function initOverLabels () { if (!document.getElementById) return; var labels, id, field; labels = document.getElementsByTagName('label'); for (var i = 0; i < labels.length; i++) { if (labels[i].className == 'overlabel') { id = labels[i].htmlFor || labels[i].getAttribute('for'); if (!id || !(field = document.getElementById(id))) { continue; } labels[i].className = 'overlabel-apply'; if (field.value !== '') { hideLabel(field.getAttribute('id'), true); } field.onfocus = function () { hideLabel(this.getAttribute('id'), true); }; field.onblur = function () { if (this.value === '') { hideLabel(this.getAttribute('id'), false); } }; labels[i].onclick = function () { var id, field; id = this.getAttribute('for'); if (id && (field = document.getElementById(id))) { field.focus(); } }; } } }; function hideLabel(field_id, hide) { var field_for; var labels = document.getElementsByTagName('label'); for (var i = 0; i < labels.length; i++) { field_for = labels[i].htmlFor || labels[i].getAttribute('for'); if (field_for == field_id) { labels[i].style.textIndent = (hide) ? '-1000px' : '0px'; return true; } } } window.onload = function () { setTimeout(initOverLabels, 50); }; </script> <?php if (function_exists('get_option_tree')) { $precision_font_family_1 = get_option_tree('precision_font_family_1'); ?> <link href='http://fonts.googleapis.com/css?family=<?php echo $precision_font_family_1; ?>' rel='stylesheet' type='text/css'> <?php } ?> <style> h1, h2 { font-family:<?php echo $precision_font_family_1; ?>; } </style> </head> <body> <div id="wrapper"> <div id="innerleft"> <div id="header"> <?php if (function_exists('get_option_tree')) { $site_logo = get_option_tree('precision_site_logo'); ?> <a href="/" title="<?php bloginfo('name');?>"><img src="<?php echo $site_logo; ?>" alt="<?php bloginfo('name');?>" /></a> <?php } ?> </div><!--end header--> <?php if (function_exists('get_option_tree')) { $precision_slideshow_image = get_option_tree('precision_slideshow_image'); } ?> <ul id="nav"><!--Navigation--> <?php //instead of using wp_nav_menu, we use wp_get_nav_menu_items so that we can store the data in array and re-use it again //wp_nav_menu(array('theme_location' => 'precision-main-menu', 'container' => 'false')); $slt_menuItems = wp_get_nav_menu_items( "precision-main-menu" ); $menusItems = array(); foreach ($slt_menuItems as $slt_menuItem) { $page_title = $slt_menuItem->title; $menuItem = new stdClass; $menuItem->title = $page_title; $menuItem->page_id = $slt_menuItem->object_id; $menusItems[] = $menuItem; ?> <li id="<?php echo strtolower($page_title); ?>nav"><a href="#<?php echo strtolower($page_title); ?>"><?php echo $page_title; ?></a></li> <?php } ?> </ul> <div id="socialMedia"> <ul class="social"> <?php if (function_exists('get_option_tree')) { $twitter_link = get_option_tree('precision_twitter_link'); $facebook_link = get_option_tree('precision_facebook_link'); $gplus_link = get_option_tree('precision_gplus_link'); $delicious_link = get_option_tree('precision_delicious_link'); $flickr_link = get_option_tree('precision_flickr_link'); $vimeo_link = get_option_tree('precision_vimeo_link'); $youtube_link = get_option_tree('precision_youtube_link'); $linkedin_link = get_option_tree('precision_linkedin_link'); ?> <!-- start linkedin icon --> <?php if($linkedin_link != ''){ ?> <li><a href="<?php echo $linkedin_link;?>" title="Follow <?php bloginfo('name'); ?> on Linkedin"><img src="<?php echo get_template_directory_uri();?>/images/social-icons/linkedin.png" width="49" height="64" alt="<?php bloginfo('name'); ?> Linkedin"/></a><li> <?php } ?> <!-- end linkedin icon --> <!--start twitter icon--> <?php if ($twitter_link != '') { ?> <li><a href="<?php echo $twitter_link; ?>" title="Follow <?php bloginfo('name'); ?> on Twitter"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/twitter.png" width="49" height="64" alt="<?php bloginfo('name'); ?> Twitter" /></a></li> <?php } ?> <!--end twitter icon--> <!--start facebook icon--> <?php if ($facebook_link != '') { ?> <li><a href="<?php echo $facebook_link; ?>" title="Follow <?php bloginfo('name'); ?> on Facebook"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/facebook.png" width="49" height="64" alt="<?php bloginfo('name'); ?> Facebook" /></a></li> <?php } ?> <!--end facebook icon--> <!--start google plus icon--> <?php if ($gplus_link != '') { ?> <li><a href="<?php echo $gplus_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/google_plus.png" width="16" height="16" alt="google+" /></a></li> <?php } ?> <!--end google plus icon--> <!--start delicious icon--> <?php if ($delicious_link != '') { ?> <li><a href="<?php echo $delicious_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/delicious.png" width="16" height="16" alt="delicious" /></a></li> <?php } ?> <!--end delicious icon--> <!--start flickr icon--> <?php if ($flickr_link != '') { ?> <li><a href="<?php echo $flickr_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/flickr.png" width="16" height="16" alt="flickr" /></a></li> <?php } ?> <!--end flickr icon--> <!--start vimeo icon--> <?php if ($vimeo_link != '') { ?> <li><a href="<?php echo $vimeo_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/vimeo.png" width="16" height="16" alt="vimeo" /></a></li> <?php } ?> <!--end vimeo icon--> <!--start youtube icon--> <?php if ($youtube_link != '') { ?> <li><a href="<?php echo $youtube_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/youtube.png" width="16" height="16" alt="youtube" /></a></li> <?php } ?> <!--end youtube icon--> <?php } ?> </ul> </div> </div><!--end innerleft--> <div id="innerright"> <?php if (function_exists('get_option_tree')) { $precision_home_page_option = get_option_tree('precision_home_page'); $precision_home_page = strtolower(get_the_title($precision_home_page_option)); if ($precision_home_page == '') { $precision_home_page = 'home'; } $precision_contact_page_option = get_option_tree('precision_contact_page'); $precision_contact_page = strtolower(get_the_title($precision_contact_page_option)); if ($precision_contact_page == '') { $precision_contact_page = 'contact'; } } foreach ($menusItems as $menuItem) { ?> <div id="<?php echo strtolower($menuItem->title); ?>" class="page"> <?php if (strtolower($menuItem->title) == $precision_home_page) { ?> <div id="homeslides"> <?php $page_data = get_page($menuItem->page_id); $content = apply_filters('the_content', $page_data->post_content); echo $content; ?> </div><!-- end home slides --> <?php } else { ?> <div class="verticalline"> <div class="scrollprevnext"></div> </div> <div class="pageheader"> <h3><span><?php echo substr($menuItem->title, 0, 1); ?></span><?php echo substr($menuItem->title, 1); ?></h3> </div><!--end pageheader --> <?php $classes = ''; if (strtolower($menuItem->title) == $precision_contact_page) { ?> <div id="<?php echo strtolower($menuItem->title); ?>scroller"> <?php $page_data = get_page($menuItem->page_id); $content = apply_filters('the_content', $page_data->post_content); echo $content; ?> </div><!--end v scroll inner--> <?php } else { $classes = 'scrollerenabledpage'; ?> <div id="<?php echo strtolower($menuItem->title); ?>scroller" class="<?php echo $classes; ?>"> <?php $page_data = get_page($menuItem->page_id); $content = apply_filters('the_content', $page_data->post_content); echo $content; ?> </div><!--end v scroll inner--> <?php } } ?> </div><!-- end page --> <?php } ?> </div><!--end innerright--> <div id="footer"> <p>&copy; <a href="/"><?php bloginfo('name');?></a> | <?php echo date('Y');?></p> </div> </div><!--end wrapper--> </div> <!--Live Preview--> </body> </html>

    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

  • Prolog: Sentence Parser Problem

    - by Devon
    Hey guys, Been sat here for hours now just staring at this code and have no idea what I'm doing wrong. I know what's happening from tracing the code through (it is going on an eternal loop when it hits verbPhrase). Any tips are more then welcome. Thank you. % Knowledge-base det(the). det(a). adjective(quick). adjective(brown). adjective(orange). adjective(sweet). noun(cat). noun(mat). noun(fox). noun(cucumber). noun(saw). noun(mother). noun(father). noun(family). noun(depression). prep(on). prep(with). verb(sat). verb(nibbled). verb(ran). verb(looked). verb(is). verb(has). % Sentece Structures sentence(Phrase) :- append(NounPhrase, VerbPhrase, Phrase), nounPhrase(NounPhrase), verbPhrase(VerbPhrase). sentence(Phrase) :- verbPhrase(Phrase). nounPhrase([]). nounPhrase([Head | Tail]) :- det(Head), nounPhrase2(Tail). nounPhrase(Phrase) :- nounPhrase2(Phrase). nounPhrase(Phrase) :- append(NP, PP, Phrase), nounPhrase(NP), prepPhrase(PP). nounPhrase2([]). nounPhrase2(Word) :- noun(Word). nounPhrase2([Head | Tail]) :- adjective(Head), nounPhrase2(Tail). prepPhrase([]). prepPhrase([Head | Tail]) :- prep(Head), nounPhrase(Tail). verbPhrase([]). verbPhrase(Word) :- verb(Word). verbPhrase([Head | Tail]) :- verb(Head), nounPhrase(Tail). verbPhrase(Phrase) :- append(VP, PP, Phrase), verbPhrase(VP), prepPhrase(PP).

    Read the article

  • Validate xsl fo in xslt styleesheet

    - by Biegal
    Hi, i have a little problem with validating xml, xslt in details. I have a xslt stylesheet that, transforms xml data source to xsl:fo document. Something like this: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <xsl:template match="/"> <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns="http://www.w3.org/1999/xhtml"> <fo:layout-master-set> <fo:simple-page-master margin-top="25mm" margin-bottom="25mm" margin-left="25mm" margin-right="25mm" page-width="210mm" page-height="297mm" master-name="simplePageLayout"> <fo:region-body region-name="xsl-region-body" column-gap="0.25in" /> <fo:region-before region-name="xsl-region-before" display-align="after" extent="0.1mm" padding-top="0pt" padding-left="0.4in" padding-right="0.4in" padding-bottom="0pt" /> <fo:region-after region-name="xsl-region-after" display-align="before" extent="0.4in" padding-top="4pt" padding-left="0.4in" padding-right="0.4in" padding-bottom="0pt" /> </fo:simple-page-master> <fo:page-sequence-master master-name="default-sequence"> <fo:repeatable-page-master-reference master-reference="simplePageLayout" /> </fo:page-sequence-master> </fo:layout-master-set> <fo:page-sequence master-reference="default-sequence"> <fo:flow flow-name="xsl-region-body"> <fo:block font-family="Segoe UI" color="#000000" font-size="9pt" /> </fo:flow> </fo:page-sequence> </fo:root> </xsl:template> What I want to do, is to validate written xsl:fo elements, ignoring xsl tags. Is it posible? For now I use dtd validation (I have xsd schema too) for validating Fo, but it give me an error on each xsl tag. Summary. Is it posiible to validate only fo elements against the schema, ignoring xsl tags, and how should I do it? Maybe a code snnippet in C#, or a hint how to modify documents? Thanks in advance!

    Read the article

  • how to align floats in IE6

    - by rei
    Good day! I am having problems displaying floated paragraphs and images in IE6. There was no problem displaying those in Opera and Firefox,though. I have three divs inside a container. Each div has its own paragraph and image either floated to the left or right. In order for me to achieve a desired layout, I set negative margins on most of the paragraphs and images. Here is how I aligned the floats: ----- CSS code for the first div ----- .row1 { float:left; width:790px; height:460px; margin:5px 0 0 40px; } .pic1 { float:right; height:460px; width:382px; margin:-100px -50px 0 -60px; } h2, p { font-family:Arial, Helvetica, sans-serif; } .row1 p { font-size:12px; text-indent:20px; font-weight:bold; text-align:justify; margin:-10px -25px 0 0; position:relative; } ----------- code for the 2nd div ------------- .row2 { float:left; width:790px; height:234px; margin:-185px 0 0 28px; position:relative; } .row2 p { float:right; font-size:12px; font-weight:bold; text-align:justify; text-indent:20px; margin:-195px 258px 0 175px; position:relative; } .pic2 { float:left; } --------- code for the 3rd div --------------- .row3 { float:left; width:790px; height:203px; margin:-10px 0 0 40px; position:relative; } .row3 p { float:left; font-size:12px; font-weight:bold; text-indent:20px; text-align:justify; margin:-180px 265px 0 10px; position:relative; } .pic3 { float:right; } ///////// The paragraphs seem to be far away from the images when viewed in IE6. Some paragraphs are overlapping with other images. I hope you can help me with this one. Thanks, Rei

    Read the article

  • Cross domain form submit does not work on Chrome and IE

    - by Debiprasad
    I am having an unexpected issue while submitting a from. The action of the form is a different domain. And the method is get. Here to the code of the from: <div style="width: 100%; background-color: #09334D; margin: 0 0 15px 0; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;" <form action="http://www.flipkart.com/search-book" method="get"> <a href="http://www.flipkart.com/?affid=debiprasad"> <img alt="Flipkart.com" style="vertical-align:middle" src="http://static.fkcdn.com/www/270/images/flipkart_india.png" /> </a> <input type="hidden" name="affid" value="debiprasad"> <input type="text" name="query" style="height:25px; width: 400px; font-size: 16px;"> <select onchange="$(this).closest('form').attr('action', 'http://www.flipkart.com/search-' + $(this).val());" style="height:25px; width: 150px; font-size: 16px;"> <option value='book' selected>Books</option> <option value='music'>Music</option> <option value='movie'>Movies & TV</option> <option value='game'>Games</option> <option value='mobile'>Mobiles</option> </select> <input type="submit" value="Search" style="height:25px; width: 100px; font-size: 16px; background: url('http://static.fkcdn.com/www/270/images/fkart/search_button_bg.png') repeat-x scroll 0 0 transparent; border: 1px solid #915A13; color: #3C2911; cursor: pointer; font-family: 'lucida grande',tahoma,verdana,arial,sans-serif; font-weight: bold; padding: 0 17px 0 15px; margin: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;"> </form> The form is located at: http://wheretobuyonline.in/ When I click on the "Search" (submit) button, it does not submit. This problem happens in Chrome and IE (8). But works without any problem on Firefox.

    Read the article

  • html horizontal scrolling

    - by mp
    Hi, i have a simple css example, and i can't understand the behavior of one of my divs, when the horizontal scroll is displayed. so...when my browser window needs to display the horizontal scroll(when the window width is less than my div "content" width(1024px)), my div "footer" (that have the same "content's" parent and 100% width), seems to get an "extra blank space" on the right side. this space grows when I reduce the width of the window. any ideas about how can i get it off, or why it happens??thanks! heres my code: css: <style type="text/css"> html, body { height: 100%; width:100%; font-family:"Arial Black", Gadget, sans-serif; font-size:11px; font-variant:normal; } * { margin: 0; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } #content{ width:1024px; margin:0px auto; background-color:#990; height:780px; } .footer, .push { height: 4em; width:100%; } #footer-content{ height:10px; background-color:#09F; width:100%; } </style> html: <body> <div class="wrapper"> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque varius tortor vitae pretium. Quisque magna ipsum, accumsan sit amet pretium sed, iaculis feugiat nibh. Donec vitae dui eros, eu ultricies nulla. Morbi aliquet, nisi in tincidunt rutrum, nisl justo sagittis nisi, nec dignissim orci elit vitae tortor. </p> </div> <div class="push"></div> </div> <div class="footer" style="background-color:#900; width:100%;"> <div id="footer-content"></div> </div> </body>

    Read the article

< Previous Page | 134 135 136 137 138 139 140 141 142 143 144 145  | Next Page >