Search Results

Search found 3190 results on 128 pages for 'ul li'.

Page 36/128 | < Previous Page | 32 33 34 35 36 37 38 39 40 41 42 43  | Next Page >

  • Stuck with jQuery thumbnail gallery behavior

    - by Vitor
    Hi everyone, I'm trying to create a simple thumbnail viewer with jQuery. Here goes the code: $(function(){ $("ul.thumbnails li").click(function(e){ var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL $("img.featured").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag) }); <div class="image-gallery"> <img class="featured" src="big.jpg"> <ul class="thumbnails"> <li id="thumb01"> <a href="big.jpg"><img src="small.jpg"></a> </li> <li id="thumb02"> <a href="big.jpg"><img src="small.jpg"></a> </li> <li id="thumb03"> <a href="big.jpg"><img src="small.jpg"></a> </li> </ul> .thumbnails li { margin: 0; padding: 5px 5px 0 5px; list-style: none; float: left; overflow: hidden; } thumbnails li img { width: 50px; height: 50px; margin: 0; padding: 0; float: left; } If i click the thumbnail, the browser goes straight to the full image instead of just changing the img src with jQuery. But I if i click somewhere inside the <li> it works. I know this must be simple, but I don't know where I'm going wrong. I've tried studying other galleries, like http://www.sohtanaka.com/web-design/examples/image-rotator/ , but couldn't find what I'm missing. I could really use some help from you guys :)

    Read the article

  • How to create 2 different scripts for 2 browsers (IE+all the rest)

    - by Barnabas Nagy
    I'm trying to solve an IE CSS issue by using conditional tags. My jQuery that does the job of tabbed box effect calls an id that is inside the conditional tags. I've given new ids to IE so on IE the jQuery is not working. I tried to duplicate the script with the new id in one of the script but the 2 scripts seems to get in conflict. My jQuery (in between the head tags) is (for all all browsers except IE): <script> var currentTab = 0; // Set to a different number to start on a different tab. function openTab(clickedTab) { var thisTab = $(".tabbed-box .tabs a").index(clickedTab); $(".tabbed-box .tabs li a").removeClass("active"); $(".tabbed-box .tabs li a:eq("+thisTab+")").addClass("active"); $(".tabbed-box .tabbed-content").hide(); $(".tabbed-box .tabbed-content:eq("+thisTab+")").show(); currentTab = thisTab; } $(document).ready(function() { $(".tabs li:eq(0) a").css("border-left", "none"); $(".tabbed-box .tabs li a").click(function() { openTab($(this)); return false; }); $(".tabbed-box .tabs li a:eq("+currentTab+")").click() }); </script> And I would need this for IE: <script> var currentTab = 0; // Set to a different number to start on a different tab. function openTab(clickedTab) { var thisTab = $(".tabbed-box .tabs a").index(clickedTab); $(".tabbed-box ie-.tabs li a").removeClass("active"); $(".tabbed-box ie-.tabs li a:eq("+thisTab+")").addClass("active"); $(".tabbed-box .tabbed-content").hide(); $(".tabbed-box .tabbed-content:eq("+thisTab+")").show(); currentTab = thisTab; } $(document).ready(function() { $(".ie-tabs li:eq(0) a").css("border-left", "none"); $(".tabbed-box .ie-tabs li a").click(function() { openTab($(this)); return false; }); $(".tabbed-box .ie-tabs li a:eq("+currentTab+")").click() }); </script> Having the 2 scripts in the head conflicts with each other. Maybe there is a way to combine them?

    Read the article

  • jQuery - addClass or removeClass - Is there an append class?

    - by iamtheratio
    I have css hover over images for my tabs and I'm trying to get the class to change from .how to .how_on when I click on the image HOW. My tabs are HOW | WHAT | WHEN | WHO | WHY I have classes for each (.how, .how_on), (.what, .what_on), etc... Can I make jQuery add _on to the original class name using click(function(){}); ? HTML: <div id="tab_container"> <ul class="tabs"> <li><a class="how_on" href="#how">How</a></li> <li><a class="why" href="#why">Why</a></li> <li><a class="what" href="#what">What</a></li> <li><a class="who" href="#who">Who</a></li> <li><a class="when" href="#when">When</a></li> </ul> <p><img src="images/tab_top.jpg" width="864px" height="6px" alt="" border="0" /></p> </div> <div class="tab_body"> <!-- HOW --> <div id="how" class="tab"> <strong>HOW IT WORKS:</strong> </div> JQUERY: <script type="text/javascript"> jQuery(document).ready(function(){ //if this is not the first tab, hide it jQuery(".tab:not(:first)").hide(); //to fix u know who jQuery(".tab:first").show(); //when we click one of the tabs jQuery(".tabs a").click(function(){ //get the ID of the element we need to show stringref = jQuery(this).attr("href").split('#')[1]; // adjust css on tabs to show active tab //hide the tabs that doesn't match the ID jQuery('.tab:not(#'+stringref+')').hide(); //fix if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") { jQuery('.tab#' + stringref).show(); } else //display our tab fading it in jQuery('.tab#' + stringref).fadeIn(); //stay with me return false; }); }); </script>

    Read the article

  • Image Hover-HTML CSS

    - by LostSchemer
    I am having trouble creating a different image to appear when you place your curser over the original image. Heres my code without the rest of my listed buttons: <nav class="buttons"> <ul> <li class="left"> <a class="home" href="www.google.com"> <img src="img/Home_2.png"></a></li> </ul> </nav> Css: .buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;} .buttons ul{list-style-type: none; margin:0px; padding:0px} .left{float:left} .home:hover {background: url(../img/Home_crack.PNG)} Any suggestions? EDIT: Okay great suggestions, however when I hover over the "home button" now the stuff in the float tweeks out. Heres the code with the full float properties: HTML: <nav class="buttons"> <ul> <li class="left"> <a class="home" href="www.google.com"> <img src="img/Home_2.png"></a></li> <li class="left"> <a href="www.google.com" class="menu"> <img src="img/Menu_2.png"></a></li> <li class="right"> <a href="www.google.com" class="about"> <img src="img/About_2.png"></a></li> <li class="right"> <a href="www.google.com" class="contact"> <img src="img/Contact_2.png"></a></li> </ul> </nav> CSS: .buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;} .buttons ul{list-style-type: none; margin:0px; padding:0px} .left{float:left} .home:hover img{display:none} .home:hover {background: url(../img/Home_crack.PNG);} .right{float:right} Basically i wanted to separate 4 buttons.... one in the left float and one in the right float, then on the hover, the buttons would change to a different image....With the new img{display:none} the left float rapidly flashes.

    Read the article

  • Navigation bar(s) disappear when the window gets too small

    - by Leron
    The title maybe is a little misleading but I'm not 100% sure how this effect is called. I'm pretty sure what I meant is that my navigation bar is disappearing instead of collapsing. However my set up is this - I am working on the Layout view of ASP.NET MVC 4 project. I'm using bootstrap 3x but also have included jQuery libs so my <head> part is like this: @Scripts.Render("~/Scripts/bootstrap.min.js") @Styles.Render("~/Content/bootstrap.css") @Styles.Render("~/Content/themes/base/jquery.ui.smoothness.css") @Scripts.Render("~/Scripts/jquery-2.0.3.min.js") @Scripts.Render("~/Scripts/jquery-ui-1.10.3.min.js") //just skipped the standard stuff In the body I want to have two navbars and one side menu which will be the same for all my pages but I've noticed that when I start to narrow the window at some point instead of getting an effect similar to this example (noticed how the elements get repositioned) I just got both my navbars gone, I can't see them. The markup for my first navbar is this : <div class="navbar navbar-static-top navbar-inverse navbar-collapse collapse" role="navigation"> <ul class="nav navbar-nav "> <li><a href="#">Info</a></li> <li><a href="#">Info</a></li> </ul> </div> and the second one is : <div class="navbar navbar-collapse collapse" role="navigation" id="main-navigation-bar"> <ul class="nav nav-pills nav-justified"> <li style="border: 1px solid grey"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> In fact the only thing left in my _Layout body is this: <div class="container-fluid"> @RenderBody() </div> which is just for compiling purposes and renders this view : <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> So when I make the window small enough so that my navbars disappear the only thing left is 1..5 numbers from the rendered view. I tested with only one navbar (commented the other) - no matter which one is commented, when I narrow the window I loose the navbar. How can I keep them using bootstrap 3x?

    Read the article

  • CSS Margin problem

    - by amitairos
    I'm starting out in HTML and CSS. I have a div element on the page, which doesn't fill the whole page. In it- there's a ul element and some list items in it. I want to put the list 227px from the top of the div element, but I can't manage to accomplish this- it pushes it more. Also- between the list items I want a margin of 40 pixels, but it also does more. What's the problem? Here's my code: Html: <body> <div class="Hashta"> <div class="Menu"> <ul id="MenuItems"> <li><a href="#" >ONE</a></li> <li><a href="#" >TWO</a></li> <li><a href="#" >THREE</a></li> <li><a href="#" >FOUR</a></li> </ul> </div> </div> </body> CSS: body { background-color: Gray; } .Hashta{ width:874px; height:650px; background-color:black; margin: auto auto 50px auto; border-radius: 20px; border: 3px solid darkgray; moz-box-shadow: 2px 2px 10px black; webkit-box-shadow: 2px 2px 10px black; box-shadow: 2px 2px 10px black; } .Menu { margin-top: 227px; padding-right: 50px; float:right; } #MenuItems { list-style:none; } #MenuItems li { text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-bottom: 40px; border:none; } #MenuItems li a{ width: 280px; height: 70px; background-color: green; color:White; font-family:Arial, Helvetica, sans-serif; font-size:24px; display:block; outline:0; text-decoration:none; text-shadow: 1px 1px 1px #000; line-height: 70px; } If you want to measure the pixels- you can install this: http://www.mioplanet.com/products/pixelruler/ (click to rotate) Thanks!

    Read the article

  • jquery skip list item

    - by steve
    Is there a way for a jQuery function to "skip" an li? Such as Having 3 list items, you click on the 1st one, it calls a next() function, and skips the 2nd li and goes to the 3rd. Current code is here: $('ul.gallery li').click(function() { $(window).scrollTo($(this).next('li'), 800, {easing:'easeOutCirc', axis:'x', offset:-50 } ); }); I want it to skip the immediate li and go to the one after that.

    Read the article

  • .live event doesnt work till second click

    - by ChampionChris
    I have 2 list on a page that are linked. When I drag a li element from list 1 to list 2 the live events on list 1 don't work on the first click only second click. Below is the code that adds the li (obj) to list 2. function AddToDropBox(obj) { $(obj).children(".handle").animate({ width: "20px" }).children("strong").fadeOut(); $(obj).children("span:not(.track,.play,.handle,:has(.btn-edit))").fadeOut('fast'); $(obj).children(".play").css("margin-right", "8px"); $(obj).css({ "opacity": "0.0", "width": "284px" }).animate({ opacity: "1.0" }); if ($(".sidebar-drop-box ul").children(".admin-song").length > 0) { $(".dropTitle").fadeOut("fast"); $(".sidebar-drop-box ul.admin-song-list").css("min-height", "0"); } if (typeof SetLinks == 'function') { SetLinks(); } //CBG Changes adds media ID to hidden field //checks id there is a value in field then adds comma if(document.getElementById("ctl00_cphBody_hfRemoveMedia").value==""||document.getElementById("ctl00_cphBody_hfRemoveMedia").value==null) { document.getElementById("ctl00_cphBody_hfRemoveMedia").value=(obj).attr("mediaid"); } else { var localMediaIDs=document.getElementById("ctl00_cphBody_hfRemoveMedia").value; document.getElementById("ctl00_cphBody_hfRemoveMedia").value=localMediaIDs+", "+(obj).attr("mediaid"); } // alert("hfid: "+document.getElementById("ctl00_cphBody_hfRemoveMedia").value); //END CBG Modifications } this is one of the live() events that dont fire until the second click after the drag. This live() event is in a document.ready function(). // Live for deleting. $(".btn-del").live("click", function(e) { DeleteItem(this); $(this).removeClass("btn-del").addClass("btn-add").parents("li").removeClass("alt").addClass("removed"); var oldTxt = $(this).parents("li").find(".status").text(); $(this).parents("li").find(".status").text("Removed").attr("oldstat", oldTxt); $("#timeHolder input[type=hidden]").val(($("#timeHolder input[type=hidden]").val() * 1) - ($(this).parents("li").find(".time").attr("length") * 1)); CalculateAggregates(); isDirty = false; }); EDIT @dreaton.. Im new to jquery and javascript so thanks for the last tip... Im not sure what you mean about cache the query's. ... the delegete feature is giving me this Microsoft JScript runtime error: Object doesn't support this property or method this is the way I have the code $('#ulPlaylist').delegate('.btn-del', 'click', function (e) { DeleteItem(this); $(this).removeClass("btn-del").addClass("btn-add").parents("li").removeClass("alt").addClass("removed"); var oldTxt = $(this).parents("li").find(".status").text(); $(this).parents("li").find(".status").text("Removed").attr("oldstat", oldTxt); $("#timeHolder input[type=hidden]").val(($("#timeHolder input[type=hidden]").val() * 1) - ($(this).parents("li").find(".time").attr("length") * 1)); CalculateAggregates(); isDirty = false; });

    Read the article

  • How to use input type="tel" in a contact form

    - by user1678664
    PHP newbie here trying to use a simple contact form. The fields I have are: "Name", "Email", "Phone", and "Message". I am trying to figure out what to do with the "Phone" field – I want it to output to the same place that "Message" does, so that when the email is received it will output both the message and the phone number to the body of the email. How do I do this? if( isset( $_POST['submit'] ) ) : wp_mail( get_option( 'admin_email' ), 'Website Contact Form', ( isset($_POST['message'] ) ? $_POST['message'] : '(blank)' ), 'From: ' . ( isset( $_POST['from_name'] ) ? $_POST['from_name'] : 'Website Contact Form' ) . ' <' . ( isset( $_POST['from_email'] ) ? $_POST['from_email'] : get_option( 'admin_email' ) ). '>' . "\r\n" ); $output = '<p>Thank you! Your message has been sent.</p>'; else : $output = ' <form action="" method="post"><ul> <li> <label for="from_name">Name</label> <input type="text" name="from_name" id="from_name" /> </li> <li> <label for="from_email">Email</label> <input type="email" name="from_email" id="from_email" /> </li> <li> <label for="from_tel">Phone</label> <input type="tel" name="from_tel" id="from_tel" /> </li> <li> <textarea name="message" id="message"></textarea> </li> <li class="submit"> <input name="submit" type="submit" value="Say Hello!" /> </li> </ul></form>'; endif; return $output;

    Read the article

  • Unexpected space between DIV elements

    - by jon
    my code for the php page displaying the divs <?php session_start(); require_once("classlib/mainspace.php"); if (isset($_SESSION['username'])==FALSE) { header("location:login.php"); } $user = new User($_SESSION['username']); ?><!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" /> <link rel="stylesheet" type="text/css" href="style/style.css" /> <title>SimpleTask - Home</title> </head> <body> <div id="main"> <div id="menu"> <div id="items"> <ul> <li><a href="home.php">home</a></li> <li>&bull;</li> <li><a href="projects.php">my projects</a></li> <li>&bull;</li> <li><a href="comments.php">my comments</a></li> </ul> </div> <div id="user"> <p>Welcome, <?php echo $user->GetRealName(); ?><br/><a href="editprofile.php">edit profile</a> &bull; <a href="logout.php">logout</a></p> </div> </div> <div id="content"> <h1>HOME</h1> </div> <div id="footer"> <p>footer text goes here here here here</p> </div> </div> </body> </html> and you can find my CSS here http://tasker.efficaxdevelopment.com/style/style.css and to view the live page go here http://tasker.efficaxdevelopment.com/login.php username:admin password:password

    Read the article

  • Jquery help : How to implement a Previous/Next & Play/Pause toggle for this script

    - by rameshelamathi
    (function($){ // Creating the sweetPages jQuery plugin: $.fn.sweetPages = function(opts){ // If no options were passed, create an empty opts object if(!opts) opts = {}; var resultsPerPage = opts.perPage || 3; var swDiv = opts.getSwDiv || "swControls"; // The plugin works best for unordered lists, althugh ols would do just as well: var ul = this; var li = ul.find('li'); li.each(function(){ // Calculating the height of each li element, and storing it with the data method: var el = $(this); el.data('height',el.outerHeight(true)); }); // Calculating the total number of pages: var pagesNumber = Math.ceil(li.length/resultsPerPage); // If the pages are less than two, do nothing: if(pagesNumber<2) return this; // Creating the controls div: //var swControls = $('<div class="swControls">'); var swControls = $('<div class='+swDiv+'>'); for(var i=0;i<pagesNumber;i++) { // Slice a portion of the lis, and wrap it in a swPage div: li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />'); // Adding a link to the swControls div: swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>'); } ul.append(swControls); var maxHeight = 0; var totalWidth = 0; var swPage = ul.find('.swPage'); swPage.each(function(){ // Looping through all the newly created pages: var elem = $(this); var tmpHeight = 0; elem.find('li').each(function(){tmpHeight+=$(this).data('height');}); if(tmpHeight>maxHeight) maxHeight = tmpHeight; totalWidth+=elem.outerWidth(); elem.css('float','left').width(ul.width()); }); swPage.wrapAll('<div class="swSlider" />'); // Setting the height of the ul to the height of the tallest page: //ul.height(maxHeight); var swSlider = ul.find('.swSlider'); swSlider.append('<div class="clear" />').width(totalWidth); var hyperLinks = ul.find('a.swShowPage'); hyperLinks.click(function(e){ // If one of the control links is clicked, slide the swSlider div // (which contains all the pages) and mark it as active: $(this).addClass('active').siblings().removeClass('active'); swSlider.stop().animate({'margin-left':-(parseInt($(this).text())-1)*ul.width()},'slow'); e.preventDefault(); }); // Mark the first link as active the first time this code runs: hyperLinks.eq(0).addClass('active'); // Center the control div: swControls.css({ 'right':'10%', 'margin-left':-swControls.width()/2 }); return this; }})(jQuery);

    Read the article

  • Implementing hoverIntent for Drop Down Menu (coming from click_event)

    - by stormeTrooper
    I've just recently started programming, I was hoping for some help. I have a drop down menu that was originally activated by click_event, however I want to now implement hoverIntent in order to make the menu drop. The issue I am having now is being able to use the menu, because whenever I invoke the menu now, once I leave the area that activates the menu, the menu closes. If you could explain to me like I'm five, I'd appreciate it, thanks :) The code I am using as follows: JavaScript: function setupUserConfigMenu() { $('.user_profile_btn').hoverIntent( function (event) { $('#user_settings_dropdown').animate({height:['toggle', 'swing'] }, 225); }, function (event) { $('#user_settings_dropdown').animate({height:['toggle', 'swing'] }, 225); }) } HTML: <li> <a href="<%= "#" %>" class="user_profile_btn" title="Your profile page"><%= truncate(current_user.full_name || current_user.name, :length => 28) %> <div class="arrow_down"></div></a> <ul id="user_settings_dropdown"> <li> <a href="<%= current_user.get_url(true) %>"> <%= image_tag current_user.get_thumb_url, :size => "30x30" %> <div> <%= truncate(current_user.full_name || current_user.name, :length => 40) %> <br> View profile </div> </a> </li> <div class="grey_line"></div> <li class="settings_list_item"> <%= link_to "Settings", edit_user_registration_path %> </li> <li class="settings_list_item"> <%= link_to "About", "/about" %> </li> <li class="settings_list_item"> <%= link_to "Logout", destroy_user_session_path, :method => :delete %> </li> </ul> </li>

    Read the article

  • HTML Language question

    - by Mike
    Note my code below. I am trying to figure out why my data is not changing to Spanish. I understand it to be one line of code and that is all within the HTML attribute lang=”es”. Any help would be greatly appreciated. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xlmns="http://www.w3.org/1999/xhtml" lang=”es” xml:lang="en"> <head> <title>JavaJam Coffee House</title> <link href="javajam.css" rel="stylesheet" type="text/css" /> </head> <body bgcolor="brown"> <h1>JavaJam Coffee House</h1> <ul> <li>Specialty Coffee and Tea</li> <li>Bagels, Muffins, and Organic Snacks</li> <li>Music and Poetry Readings</li> <li>Usability Studies</li> <li>Open Mic Night</li> </ul> <br></br> <p>12312 Main Street<br> Mountain Home, CA 93923<br> 1-888-555-5555</br> </p> <p> <em> <small>Copyright &copy; 2008 JavaJam Coffee House</em></p> E-Mail <a href="mailto;[email protected]"> Michael J. Crawley</a> </body> </html>

    Read the article

  • Align 2 columns of text links

    - by andu
    Hi , I have this code in my block and i would like to have the two columns left and right . Now the 2-nd one is under the first column . <style type="text/css"> a img{border:none;} #planninglaunchbox { background:#f3f8e7; color:#1f1f1f; font:normal 11px Arial,sans-serif; margin:0 10px 10px 0; overflow:hidden; width:235px; } #planninglaunchbox .inner { padding:10px 0 10px 10px; } #planninglaunchbox a{color:#1f1f1f;text-decoration:none;} #planninglaunchbox a:active, #planninglaunchbox a:hover{text-decoration:underline;color:#579BC3;} #planninglaunchbox h3 { color:#1f1f1f; font:normal 12px Georgia,serif; margin:0 0 5px; text-transform:lowercase; width:215px; } #planninglaunchbox h4 { font:bold 12px Arial,sans-serif; margin:0 0 10px; } #planninglaunchbox ul { list-style:none; margin:0 0 5px; padding:0; } #planninglaunchbox ul.first{margin-right:10px;} #planninglaunchbox ul.first, #planninglaunchbox ul.last { float:left; } #planninglaunchbox ul li { background:none; margin-bottom:5px; padding:0; } #planninglaunchbox ul li img { margin-right:6px; vertical-align:middle; } #planninglaunchbox .seeall { clear:both; margin:0; padding:0; width:auto; } </style> <div id="planninglaunchbox"> <div class="inner"> <h3> Theme</h3> <ul class="first"> !--Some links-- </ul> <ul class="last"> !--Some links-- </ul> </div> </div>

    Read the article

  • CSS- removing horizontal space in list menu using display inline property

    - by Kayote
    Hi All, Im new to CSS and have a set target of learning & publishing my website in CSS by the end of the month. My question: Im trying to build a CSS horizontal menu with hover drop downs, however, when I use the 'display: inline' property with li (list) items, I get horizontal spaces between the li (list) items in the bar. How do I remove this space? Here is the html: <div id="tabas_menu"> <ul> <li id="tabBut0" class="tabBut">Overview</li> <li id="tabBut1" class="tabBut">Collar</li> <li id="tabBut2" class="tabBut">Sleeves</li> <li id="tabBut3" class="tabBut">Body</li> </ul> </div> And here is the CSS: #tabas_menu { position: absolute; background: rgb(123,345,567); top: 110px; left: 200px; } ul#tabas_menu { padding: 0; margin: 0; } .tabBut { display: inline; white-space: list-style: none; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,142,190,1)),to(rgba(188,22,93,1))); background: -moz-linear-gradient(top, rgba(255,142,190,1), rgba(188,22,93,1)); font-family: helvetica, calibri, sans-serif; font-size: 16px; font-weight: bold; line-height: 20px; text-shadow: 1px 1px 1px rgba(99,99,99,0.5); -moz-border-radius: 0.3em; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); -webkit-border-radius: 0.3em; -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); padding: 6px 18px; border: 1px solid rgba(0,0,0,0.4); margin: 0; } I can get the space removed using the 'float: left/right' property but its bugging me as to why I cannot achieve the same effect by just using the display property.

    Read the article

  • Adding the text area input to a list with jquery

    - by amylynn83
    I am making a shopping list app. When an item is added to the text input, it should be converted into a list item with a class of "tile" and added to the beginning of the list with a class of ".shopping_item_list". Here is my HTML: <section> <h1 class="outline">Shopping List Items</h1> <ul class="shopping_item_list"> <li class="tile">Flowers<span class="delete">Delete</span></li> </ul> </section> My jQuery: $("input[name='shopping_item']").change(function() { var item = $(this).val(); $("<li class='tile'>+ item +</li>").prependTo(".shopping_item_list"); $(".tile").removeClass("middle"); $(".shopping_item_list li:nth-child(3n+2)").addClass("middle"); }); This isn't working, and I can't figure out why. I'm new to jQuery. Also, I need to add the "delete" span to the list item and am not sure how. Thanks for any help you can offer! Edited to add: Thanks to the feedback here, I was able to make it work with: $("input[name='shopping_item']").change(function() { var item = $(this).val(); $("<li class='tile'>" + item + "<span class='delete'>Delete</span>" + " </li>").prependTo(".shopping_item_list"); $(".tile").removeClass("middle"); $(".shopping_item_list li:nth-child(3n+2)").addClass("middle"); }); However, in my jquery, I have functions for the classes "tile" and "delete" that are not working for newly added items. // hide delete button $(".delete").hide(); // delete square $(".tile").hover(function() { $(this).find(".delete").toggle(); }); $(".tile").on("click", ".delete", function() { $(this).closest("li.tile").remove(); $(".tile").removeClass("middle"); $(".shopping_item_list li:nth-child(3n+2)").addClass("middle"); }); // cross off list $(".tile").click(function() { $(this).toggleClass("deleteAction"); }); The new items, which have these classes applied aren't using these functions at all. Do I need to add the functions below the add item? Does the order in which they appear in my js file matter? Do I need to add some kind of function?

    Read the article

  • How can I use $(this) in a function called by the onClick event?

    - by tepkenvannkorn
    I want to set the current state to selected when clicking on each link. I can do this by: <ul class="places"> <li class="selected"> <a href="javascript:void(0)" onclick="myClick(0);"> <span class="date">Saturday November 2, 2013</span> <span class="time">10am – 12pm</span> <span class="location">Western Sydney Parklands</span> </a> </li> <li> <a href="javascript:void(0)" onclick="myClick(1);"> <span class="date">Saturday November 9, 2013</span> <span class="time">10am – 12pm</span> <span class="location">Bankstown High School</span> </a> </li> <li> <a href="javascript:void(0)" onclick="myClick(2);"> <span class="date">Tuesday November 12, 2013</span> <span class="time">9am – 11am</span> <span class="location">Greystanes Park</span> </a> </li> </ul> $(document).ready( function() { $('.places li a').click( function() { $('.places li').removeClass('selected'); $(this).parent().addClass('selected'); }); }); But this will double triggering onclick event an each link because the calling function myClick() is called to push data to map. Then I decided to implement these in the myClick() function: function myClick( id ) { google.maps.event.trigger(markers[id], 'click'); $('.places li').removeClass('selected'); $(this).parent().addClass('selected'); } The problem is that I cannot use $(this) to add class to its parent li. See what I have tried here. Any help would be very much appreciated. Thanks!

    Read the article

  • Please Help - PHP Form, when no text is entered [migrated]

    - by Joe Turner
    I'm creating a mobile landing page and I have also created a form that allows me to create more, by duplicating a folder that's host to a template file. The script then takes you to a page where you input the company details one by one and press submit. Then the page is created. My problem is, when a field is left out (YouTube for instance), the button is created and is blank. I would like there to be a default text for when there is no text. I've tried a few things and have been struggling to make this work for DAYS! <?php $company = $_POST["company"]; $phone = $_POST["phone"]; $colour = $_POST["colour"]; $email = $_POST["email"]; $website = $_POST["website"]; $video = $_POST["video"]; ?> <div id="contact-area"> <form method="post" action="generate.php"><br> <input type="text" name="company" placeholder="Company Name" /><br> <input type="text" name="slogan" placeholder="Slogan" /><br> <input class="color {required:false}" name="colour" placeholder="Company Colour"><br> <input type="text" name="phone" placeholder="Phone Number" /><br> <input type="text" name="email" placeholder="Email Address" /><br> <input type="text" name="website" placeholder="Full Website - Include http://" /><br> <input type="text" name="video" placeholder="Video URL" /><br> <input type="submit" value="Generate QuickLinks" style="background:url(images/submit.png) repeat-x; color:#FFF"/> </form> That's the form. It takes the variables and post's them to the file below. <?php $File = "includes/details.php"; $Handle = fopen($File, 'w'); ?> <?php $File = "includes/details.php"; $Handle = fopen($File, 'w'); $Data = "<div id='logo'> <h1 style='color:#$_POST[colour]'>$_POST[company]</h1> <h2>$_POST[slogan]</h2> </div> <ul data-role='listview' data-inset='true' data-theme='b'> <li style='background-color:#$_POST[colour]'><a href='tel:$_POST[phone]'>Phone Us</a></li> <li style='background-color:#$_POST[colour]'><a href='mailto:$_POST[email]'>Email Us</a></li> <li style='background-color:#$_POST[colour]'><a href='$_POST[website]'>View Full Website</a></li> <li style='background-color:#$_POST[colour]'><a href='$_POST[video]'>Watch Us</a></li> </ul> \n"; fwrite($Handle, $Data); fclose($Handle); ?> and there is what the form turns into. I need there to be a default link put in incase the field is left blank, witch it is sometimes. Thanks in advance guys.

    Read the article

  • jQuery - discrepency between classname and selectors

    - by Ciel
    I have the following code that I wrote, which I personally found to be pretty nice. It takes a <ul> and it drops down the contents when clicked. But I am having a disconnect here in comprehension, and one I had to do what I feel is a 'dirty hack' to solve. The problem is that I do not want the class `'sidebar-dropdown-open' to be so 'hardwired' in the plugin. However I discovered that there is a very stark difference between... $('.sidebar-dropdown-open') and 'sidebar-dropdown-open and even '.sidebar-dropdown-open. I 'solved' this problem by including two different 'parameters' in my plugin, but I was wondering if someone might give me some insight as to how I could perform this better, and why this was behaving this way. wiring (document load) $(document).ready(function () { $('[data-role="sidebar-dropdown"]').drawer({ open: 'sidebar-dropdown-open', css: '.sidebar-dropdown-open' }); }); html <ul> <li class=" dropdown" data-role="sidebar-dropdown"> <a href="pages/.." class="remote">Link Text</a> <ul class="sub-menu light sidebar-dropdown-menu"> <li><a class="remote" href="pages/...">Link Text</a></li> <li><a class="remote" href="pages/...">Link Text</a></li> <li><a class="remote" href="pages/...">Link Text</a></li> </ul> </li> </ul> javascript (function ($) { $.fn.drawer = function (options) { // Create some defaults, extending them with any options that were provided var settings = $.extend({ open: 'open', css: '.open' }, options); return this.each(function () { $(this).on('click', function (e) { // slide up all open dropdown menus $(settings.css).not($(this)).each(function () { $(this).removeClass(settings.open); // retrieve the appropriate menu item var $menu = $(this).children(".dropdown-menu, .sidebar-dropdown-menu"); // slide down the one clicked on. $menu.slideUp('fast'); $menu.removeClass('active'); }); // mark this menu as open $(this).addClass(settings.open); // retrieve the appropriate menu item var $menu = $(this).children(".dropdown-menu, .sidebar-dropdown-menu"); // slide down the one clicked on. $menu.slideDown(100); $menu.addClass('active'); e.preventDefault(); e.stopPropagation(); }).on("mouseleave", function () { $(this).children(".dropdown-menu").hide().delay(300); }); }) }; })(jQuery); I have tried using settings.open and demanding that it just be a className (.open), etc. - but that does not seem to work. It seems to get ignored by the removeClass function.

    Read the article

  • Pulling My Hair Out - PHP Forms [migrated]

    - by Joe Turner
    Hello and good morning to all. This is my second post on this subject because the first time, things still didn't work and I have now literally been trying to solve this for about 4/5 days straight... I have a file, called 'edit.php', in this file is a form; <?php $company = $_POST["company"]; $phone = $_POST["phone"]; $colour = $_POST["colour"]; $email = $_POST["email"]; $website = $_POST["website"]; $video = $_POST["video"]; $image = $_POST["image"]; $extension = $_POST["extension"]; ?> <form method="post" action="generate.php"><br> <input type="text" name="company" placeholder="Company Name" /><br> <input type="text" name="slogan" placeholder="Slogan" /><br> <input class="color {required:false}" name="colour" placeholder="Company Colour"><br> <input type="text" name="phone" placeholder="Phone Number" /><br> <input type="text" name="email" placeholder="Email Address" /><br> <input type="text" name="website" placeholder="Full Website - Include http://" /><br> <input type="text" name="video" placeholder="Video URL" /><br> <input type="submit" value="Generate QuickLinks" style="background:url(images/submit.png) repeat-x; color:#FFF"/> </form> Then, when the form is submitted, it creates a file using the variables that have been input. The fields that have been filled in go on to become links, I need to be able to say 'if a field is left blank, then put 'XXX' in as a default value'. Does anyone have any ideas? I really think I have tried everything. I'll put below a snippet from the .php file that generates the links... <?php $File = "includes/details.php"; $Handle = fopen($File, 'w'); ?> <?php $File = "includes/details.php"; $Handle = fopen($File, 'w'); $Data = "<div id='logo'> <img width='270px' src='images/logo.png'/img> <h1 style='color:#$_POST[colour]'>$_POST[company]</h1> <h2>$_POST[slogan]</h2> </div> <ul> <li><a class='full-width button' href='tel:$_POST[phone]'>Phone Us</a></li> <li><a class='full-width button' href='mailto:$_POST[email]'>Email Us</a></li> <li><a class='full-width button' href='$_POST[website]'>View Full Website</a></li> <li><a class='full-width button' href='$_POST[video]'>Watch Us</a></li> </ul> \n"; I really do look forward to any response...

    Read the article

  • jQuery UI Tabs Plugin Broke

    - by Warren J Thompson
    We are using the jquery ui tabs arrow plugin from this fiddle: http://jsfiddle.net/dECtZ/282/, but like many plugins, it breaks with the latest version of jQuery. We were able to get the csscur to work, but still get the following error in the jquery core (line 353): Uncaught TypeError: Cannot assign to read only property 'length' of function (e,t){if(!this._createWidget)return new o(e,t);arguments.length&&this._createWidget(e,t)} Code is as follows: (function($, undefined) { if (!$.xui) { $.xui = {}; } var tabs = $.extend({}, $.ui.tabs.prototype), _super = { _create: tabs._create, _destroy: tabs._destroy, _update: tabs._update }; $.xui.tabs = $.extend(tabs, { options: $.extend({}, tabs.options, { scrollable: false, changeOnScroll: false, closable: false, resizable: false, resizeHandles: "e,s,se" }), _create: function() { var self = this, o = self.options; _super._create.apply(self); if (o.scrollable) { self.element.addClass("ui-tabs-scrollable"); var scrollContainer = $('<div class="ui-tabs-scroll-container"></div>').prependTo(this.element); self.header = $('<div class="ui-tabs-nav-scrollable ui-widget-header ui-corner-all"></div>').prependTo(scrollContainer); var nav = self.element.find(".ui-tabs-nav:first").removeClass("ui-widget-header ui-corner-all").appendTo(this.header); var arrowsNav = $('<ol class="ui-helper-reset ui-helper-clearfix ui-tabs-nav-arrows"></ol>').prependTo(self.element); var navPrev = $('<li class="ui-tabs-arrow-previous ui-state-default ui-corner-bl ui-corner-tl" title="Previous"><a href="#"><span class="ui-icon ui-icon-carat-1-w">Previous tab</span></a></li>').prependTo(arrowsNav).hide(), navNext = $('<li class="ui-tabs-arrow-next ui-state-default ui-corner-tr ui-corner-br" title="Next"><a href="#"><span class="ui-icon ui-icon-carat-1-e">Next tab</span></a></li>').appendTo(arrowsNav).hide(); var scrollTo = function(to, delay) { var navWidth = 0, arrowWidth = navPrev.outerWidth(), marginLeft = -(parseInt(nav.css("marginLeft"), 10)), hwidth = self.header.width(), newMargin = 0; nav.find("li").each(function() { navWidth += $(this).outerWidth(true); }); if (to instanceof $.Event) { } else { newMargin = marginLeft+to; if (newMargin > (navWidth-hwidth)) { newMargin = (navWidth-hwidth); } else if (newMargin < 0) { newMargin = 0; } nav.stop(true).animate({ marginLeft: -(newMargin) }, delay, function(){ $(window).trigger("resize.tabs"); }); } } var holdTimer = false; navPrev.add(navNext).bind({ "click": function(e) { var isNext = this === navNext[0]; e.preventDefault(); if (o.changeOnScroll) { self.select(self.options.selected + (isNext ? 1 : -1)); } else { if (!holdTimer) scrollTo(isNext ? 150 : -150, 250); } }, "mousedown": function(e){ if (!o.changeOnScroll) { var isNext = this === navNext[0], duration = 10, pos = 15, timer; if (holdTimer) clearTimeout(holdTimer); holdTimer = setTimeout(timer = function(){ scrollTo(isNext ? pos : -(pos), duration); holdTimer = setTimeout(arguments.callee, duration); }, 150); } }, "mouseup mouseout": function(e){ if (!o.changeOnScroll) { clearTimeout(holdTimer); holdTimer = false; nav.stop(); } } }); self.header.bind('mousewheel', function(e, d, dX, dY) { e.preventDefault(); if (d === -1) { navNext.click(); } else if (d === 1) { navPrev.click(); } }); $(window).bind("resize.tabs", function(e) { var navWidth = 0; var arrowWidth = navPrev.outerWidth(); nav.find("li").each(function() { navWidth += $(this).outerWidth(true); }); var marginLeft = -(parseInt(nav.css("marginLeft"), 10)), hwidth = self.header.width(); if (navWidth > (hwidth+marginLeft)) { self.header.addClass("ui-tabs-arrow-r"); navNext.show("fade"); if (marginLeft > 0) { self.header.addClass("ui-tabs-arrow-l"); navPrev.show("fade"); } else { self.header.removeClass("ui-tabs-arrow-l"); navPrev.hide("fade"); } } else { self.header.removeClass("ui-tabs-arrows ui-tabs-arrow-l"); navNext.hide("fade"); if (marginLeft > 0) { self.header.addClass("ui-tabs-arrow-l"); navPrev.show("fade"); } else { self.header.removeClass("ui-tabs-arrow-l"); navPrev.hide("fade"); } } }).trigger("resize.tabs"); arrowsNav.find("li").bind({ "mouseenter focus": function(e) { $(this).addClass("ui-state-hover"); }, "mouseleave blur": function(e) { $(this).removeClass("ui-state-hover"); } }); this.anchors.bind("click.tabs", function(){ var li = $(this).parent(), arrowWidth = navPrev.outerWidth(), width = li.outerWidth(true), hwidth = self.header.width(), pos = li.position().left, marginLeft = -(parseInt(nav.stop(true,true).css("marginLeft"),10)), newMargin = -1; if (li.index() === 0) { newMargin = 0; } else if ((pos+width) >= (hwidth+marginLeft)) { newMargin = pos-hwidth+width; if ((li.index()+1) < nav.find("li").length) { newMargin += arrowWidth; } } else if (pos < marginLeft) { newMargin = pos-arrowWidth; } if (newMargin > -1) { nav.animate({ marginLeft: -(newMargin) }, 250, function(){ $(window).trigger("resize.tabs"); }); } }); } return self; }, _update: function(){ console.log(arguments); _super._update.apply(this); } }); $.widget("xui.tabs", $.xui.tabs); })(jQuery); $(function() { $("#tabs").tabs({ scrollable: true, changeOnScroll: false, closable: true }); $("#switcher").themeswitcher(); });

    Read the article

  • Custom styled select box

    - by Ivan
    Hi to all am trying to use javascript for custom styled select boxes from www.gerrendesign.com/entry_images/selectboxdemo.zip and as I have plenty entries inside one of select box I need to make but am stuck in creation of scrolling function. As this select boxes are compatible with almost all older and new browsers. I need only suggestion or solution how to add scroll in this linked/attached files above - if select box is populated with plenty of entries (example cities, states, or exchange rates...) Am stuck here... Thanks for your cooperation Ivan THIS IS CODE: $(document).ready(function(){ // first locate all of the select tags on the page and hide them $("select.changeMe").css('display','none'); //now, for each select box, run this function $("select.changeMe").each(function(){ var curSel = $(this); // get the CSS width from the original select box var gddWidth = $(curSel).css('width'); var gddWidthL = gddWidth.slice(0,-2); var gddWidth2 = gddWidthL - 28; var gddWidth3 = gddWidthL - 16; // build the new div structure var gddTop = '<div style="width:' + gddWidthL + 'px" class="selectME" tabindex="0"><div class="cornerstop"><div><div></div></div></div><div class="middle"><div><div><div>'; //get the default selected option var whatSelected = $(curSel).children('option:selected').text(); //write the default var gddFirst = '<div class="first"><span class="selectME gselected" style="width:'+ gddWidth2 + 'px;">'+ whatSelected +'</span><span id="arrowImg"></span><div class="clears"></div></div><ul class="selectME">'; // create a new array of div options from the original's options var addItems = new Array(); $(curSel).children('option').each( function() { var text = $(this).text(); var selVal = $(this).attr('value'); var before = '<li style="width:' + gddWidthL + 'px;"><a href="#" rel="' + selVal + '" tabindex="0" style="width:' + gddWidth3 + 'px;">'; var after = '</a></li>'; addItems.push(before + text + after); }); //hide the default from the list of options var removeFirst = addItems.shift(); // create the end of the div selectbox and close everything off var gddBottom ='</ul></div></div></div></div><div class="cornersbottom"><div><div></div></div></div></div>' //write everything after each selectbox var GDD = gddTop + gddFirst + addItems.join('') + gddBottom; $(curSel).after(GDD); //this var selects the div select box directly after each of the origials var nGDD = $(curSel).next('div.selectME'); $(nGDD).find('li:first').addClass("first"); $(nGDD).find('li:last').addClass('last'); //handle the on click functions - push results back to old text box $(nGDD).click( function(e) { var myTarA = $(e.target).attr('rel'); var myTarT = $(e.target).text(); var myTar = $(e.target); //if closed, then open if( $(nGDD).find('li').css('display') == 'none') { //this next line closes any other selectboxes that might be open $('div.selectME').find('li').css('display','none'); $(nGDD).find('li').css('display','block'); //if user clicks off of the div select box, then shut the whole thing down $(document.window || 'body').click( function(f) { var myTar2 = $(f.target); if (myTar2 !== nGDD) {$(nGDD).find('li').css('display','none');} }); return false; } else { if (myTarA == null){ $(nGDD).find('li').css('display','none'); return false; } else { //set the value of the old select box $(curSel).val(myTarA); //set the text of the new one $(nGDD).find('span.gselected').text(myTarT); $(nGDD).find('li').css('display','none'); return false; } } //handle the tab index functions }).focus( function(e) { $(nGDD).find('li:first').addClass('currentDD'); $(nGDD).find('li:last').addClass('lastDD'); function checkKey(e){ //on keypress handle functions function moveDown() { var current = $(nGDD).find('.currentDD:first'); var next = $(nGDD).find('.currentDD').next(); if ($(current).is('.lastDD')){ return false; } else { $(next).addClass('currentDD'); $(current).removeClass('currentDD'); } } function moveUp() { var current = $(nGDD).find('.currentDD:first'); var prev = $(nGDD).find('.currentDD').prev(); if ($(current).is('.first')){ return false; } else { $(prev).addClass('currentDD'); $(current).removeClass('currentDD'); } } var curText = $(nGDD).find('.currentDD:first').text(); var curVal = $(nGDD).find('.currentDD:first a').attr('rel'); switch (e.keyCode) { case 40: $(curSel).val(curVal); $(nGDD).find('span.gselected').text(curText); moveDown(); return false; break; case 38: $(curSel).val(curVal); $(nGDD).find('span.gselected').text(curText); moveUp(); return false; break; case 13: $(nGDD).find('li').css('display','none'); } } $(document).keydown(checkKey); }).blur( function() { $(document).unbind('keydown'); }); }); });

    Read the article

  • CSS layout changes in Internet explorer

    - by user1784103
    My problem: I just coded a website that is styled just fine in chrome and firefox. However in internet explorer(9) it breaks. the gray header background is supposed to be pushed up to the right of the logo block, and the buttons are supposed to be in the dark grey area. I posted my code. I'm no expert at css, any tips would be greatly appreciated. (the second image is displaying the desired result) the html: Website </head> <body> <div class="wrap_overall"> <div class="header"> <a href="http://localhost"> <img class="logo" src="http://localhost/images/logo.png" width="175" height="24" alt="weblogo" /> </a> </div> <div class="headerbg"></div> <!-- nav top highlight --> <div style="background-color:#6c6c6c;margin:9px0px0px;height:1px;width:1020px;z-index:1;"></div> <!-- nav bar --> <div style="background-color:#5a5a5a;height:53px;width:1020px;z-index:1;"></div> <!-- nav bottom frame --> <div style="background-color:#d4e6b6;height:13px;width:1020px;z-index:1;border-top:4px solid #9de629; margin:0px 0px 10px;"></div> <div class="nav_main"> <ul> <li> <a href="http://localhost/button1"> <img src="http://localhost/images/button1.png" width="63" height="18" alt="button1" /> </a> </li> <li> <a href="http://localhost/index.php?page=button2"> <img src="http://localhost/images/button2.png" width="59" height="18" alt="button2" /> </a> </li> <li> <a href="http://localhost/index.php?page=button3"> <img src="http://localhost/images/button3.png" width="62" height="18" alt="button3" /> </a> </li> <li> <a href="http://localhost/index.php?page=button4"> <img src="http://localhost/images/button4.png" width="41" height="18" alt="button4" /> </a> </li> <li> <a href="http://localhost/index.php?page=button5"> <img src="http://localhost/images/button5.png" width="73" height="18" alt="button5" /> </a> </li> </ul> </div> </div> </body> </html> the css: .logo { padding:60px 20px 50px 20px; } body { background-color:#282828; color:#FFFFFF; font-family: Arial, Helvetica, sans-serif; } body a, img{ border-style:none; color:#9de629; text-decoration:none;} body a:visited {color:#9de629;} body a:hover{ color:#FFFFFF; text-decoration:underline;} .wrap_overall { position:relative; width: 1020px; margin:0px auto; } .header { width:216px; height:148px; margin:0px 0px; padding:0px 0px; background-color:#252525; float:left; display:inline; } .headerbg { margin:0px 0px 0px; padding:0px 0px; width:1020px; height:148px; background-color:#c7c7c7; } .nav_main/*holds the buttons*/ { margin:0px 0px 1px 0px; padding:0px 0px 0px 0px; position:absolute; top:148px; left:363px; z-index:2; overflow: hidden; } .nav_main ul { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; overflow: hidden; } .nav_main ul li { margin:0px 0px 0px 0px; display: inline; float: left; } .nav_main ul li a { outline: none; border:none; margin:0px 0px 0px 0px; margin-right:-10px; height:54px; width:125px; color:#FFFFFF; background-image:url(../images/button.png); text-align:center; display:table-cell; vertical-align:middle; } .nav_main ul li a:hover { background-image:url(../images/buttonlight.png); }

    Read the article

  • 2 javascripts problem

    - by pradeep
    <?php global $user; $userId = $user->uid; /* start with default */ $myresult = ""; /* All Includes - start */ include_once('db.php'); include_once('valid-scripts/validateData.php'); /* All Includes - end */ /* Build All required Variables - start */ $alias = $_GET['alias']; $product = $_GET['product']; $product = strtolower(substr($product,0,-1)); $master_table = $product.'_master'; $rating_master_table = $product.'_rating_master'; $rating_table = $product.'_rating'; $numProperties = 15; /* Build All required Variables - end */ /* Add all Styles required - start */ $myresult .= '<link href="/jquery.rating.css" type="text/css" rel="stylesheet"/>'; /* Add all Styles required - end */ /* Show Hide Variables/parameters - start */ include_once('all_include_files/show_hide.php'); /* Show Hide Variables/parameters - end */ /* All Javascript - start */ //$myresult .= '<script src="/jquery.rating.js" type="text/javascript" language="javascript"></script>'; ?> <style> #tabs { //font-size: 90%; //margin: 20px 0; margin: 2px 0; } #tabs ul { float: right; background: #E3FEFA; width: 600px; //padding-top: 4px; } #tabs li { margin-left: 8px; list-style: none; } * html #tabs li { display: inline; /* ie6 double float margin bug */ } #tabs li, #tabs li a { float: left; } #tabs ul li a { text-decoration: none; //padding: 8px; color: #0073BF; font-weight: bold; } #tabs ul li.active { background: #CEE1EF url(/all_include_files/img/nav-right.gif) no-repeat right top; } #tabs ul li.active a { background: url(/all_include_files/img/nav-left.gif) no-repeat left top; color: #333333; } #tabs div { //background: #CEE1EF; clear: both; //padding: 20px; min-height: 200px; } #tabs div h3 { text-transform: uppercase; margin-bottom: 10px; letter-spacing: 1px; #tabs div p { line-height: 150%; } </style> <script src="/jquery.rating.js" type="text/javascript" language="javascript"></script> <script src="/jquery.metadata.js" type="text/javascript" language="javascript"></script> <script type='text/javascript'> function openComment(number) { alert('working'); $('#comment'+number).css('display',''); } $('.star').rating({ callback: function(value, link){ alert(value); } }); $(document).ready(function() { //$('#tabs div').hide(); //$('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function() { $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; }); $("#clickit").click(function() { $.post("/mobile/tablechange.php",{ p1:'<?php echo $brand ?>',p2:'<?php echo $model ?>',userid:'<?php echo $userid ?>' } ,function(data){ $("#changetable").html(data); }); }); $('div.expandable p').expander({ slicePoint: 200, // default is 100 expandText: 'more &raquo;', // default is 'read more...' collapseTimer: 0, // re-collapses after 5 seconds; default is 0, so no re-collapsing userCollapseText: '[^]' // default is '[collapse expanded text]' }); }); </script> <?php /* All Javascript - end */ /* Form Processing after submit - start */ /* Form Processing after submit - end */ /* Actual Form or Page - start */ /*fetch all data needed */ /* initial query */ $result_product = query_product_table($product,$alias); /*fetch property names of product */ $product_properties = master_table($master_table); /*rating table query */ $master_rating_properties = master_rating_table($rating_master_table); /*get user ratings*/ $user_ratings = user_ratings($userId,$alias,$rating_table); $myresult .= '<div class=\'Services\'>'; //$myresult .="<form name ='form1' id='form1' method = 'POST' action='".$_SERVER['php_self'] ."'>"; if(!$result_product) { header('Location: /page-not-found'); } else { $row_product = mysql_fetch_array($result_product); $myresult .= "<h3 class='newstyle'>".$row_product['alias']." <a style='float:right;padding-right:20px;color:white;text-decoration:underline;' href='/'>Back</a> </h3>"; /* start actual product display - start*/ $myresult .= "<div class=\"product\">"; /* start table 1*/ $myresult .= '<table border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'width:580px; table-layout:fixed;\'>'; $myresult .= '<tr>'; $myresult .='<td valign=\'top\'>'; /* start table 2*/ $myresult .='<table width=\'100%\' border=\'0\' cellspacing=\'0\' cellpadding=\'0\'>'; $myresult .= '<tr>'; $myresult .= '<td valign=\'top\' style=\'width:164px;\'>'; /* start table 3*/ $myresult .= '<table style=\'width:164px;\' border=\'0\' cellspacing=\'0\' cellpadding=\'0\'>'; $myresult .= "<tr>"; /* start of the pic row */ $myresult .= '<td align=\'center\' class=\'various_product\'>'; if($row_product['pic'] != "") { $myresult .= '<ul id=\'mycarousel\' style=\'display:\';>'; $myresult .= '<li><a href=\'/all_image_scripts/origpicdisplay.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'&picid=pic&p= \'rel=\'lightbox[roadtrip]\'><img src=\'/all_image_scripts/picdisplay1.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'\'></img></a></li>'; for($p = 1; $p <= 4; $p++) { if($row_product['pic'.$p] != "") { $myresult .= '<li><a href=\'/all_image_scripts/origpicdisplay.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'&picid=pic'.rawurlencode($p).'&p='.rawurlencode($p).'\' rel=\'lightbox[roadtrip]\'><img src=\'/all_image_scripts/thumbpicdisplay.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'&picid=pic'.rawurlencode($p).'\'></img></a></li>'; } } $myresult .= '</ul>'; } else { $myresult .= "<img width='50' height='70' src='/images/no-image.gif'></img>"; } jcarousel_add('#mycarousel', array('horizontal' => TRUE,'scroll' => 1,'visible' => 1)); $myresult .= "</td>"; /* end display of pic td*/ $myresult .= "</tr>"; /* end display of pic tr*/ $myresult .= "</table></td>"; /* end display of pic table and earlier td - Still 1 open TR td table tr -hint*/ $myresult .= '<td style=\'width:450px;\'>'; /*table - 4*/ $myresult .= '<table width=\'100%\' border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'display:block;\'>'; /* Start showing property and values */ $myresult .= '<tr>'; $myresult .= '<td class=\'tick\'><img src=\'/images/ul_li_bg.gif\' width=\'12\' height=\'12\' /></td>'; $myresult .= '<td class=\'leftText\'>'.ucfirst($product).':</td>'; $myresult .= '<td class=\'rightText\'>'.$row_product['alias'] .'</td>'; $myresult .= "</tr>"; for($j = 3; $j <= 5 ; $j++){ if($product_properties['property'.$j.'_name'] != "") { if($row_product['property'.$j] != "") { $myresult .= '<tr>'; $myresult .= '<td class=\'tick\'><img src=\'/images/ul_li_bg.gif\' width=\'12\' height=\'12\' /></td>'; $myresult .= '<td class=\'leftText\'>'.$product_properties['property'.$j.'_name'].':</td>'; $myresult .= '<td class=\'rightText\'>'.$row_product['property'.$j] .'</td>'; $myresult .= '</tr>'; } /* end if*/ } /* end if*/ } /* end for*/ /* show hide block */ $myresult .= '<tbody id=\'extra_properties\' style=\'display: none;\'>'; for($j = 6; $j <= 15 ; $j++){ if($product_properties['property'.$j.'_name'] != "") { if($row_product['property'.$j] != "") { $myresult .= '<tr>'; $myresult .= '<td class=\'tick\'><img src=\'/images/ul_li_bg.gif\' width=\'12\' height=\'12\' /></td>'; $myresult .= '<td class=\'leftText\'>'.$produtc_properties['property'.$j.'_name'].':</td>'; $myresult .= '<td class=\'rightText\'>'.$row_product['property'.$j] .'</td>'; $myresult .= '</tr>'; } /* end if*/ } /* end if*/ } /* end for */ $myresult .= '</tbody>'; /* end show/hide tbody */ $myresult .= '<tr>'; $myresult .= '<td>'; $myresult .= '&nbsp;'; $myresult .= '</td>'; $myresult .= '<td>'; $myresult .= '&nbsp;'; $myresult .= '</td>'; $myresult .= '<td align=\'right\' style=\'text-align:right;text-decoration:underline;\'>'; $myresult .= '<a class=\'right_link\' href=\'javascript:showMore()\'>Show Additional Details...</a>'; $myresult .= '</td>'; $myresult .= '</tr>'; /* End showing property and values */ $showreview = 'display:'; /* review show hide */ /*$myresult .= '<tbody '.$showreview.'>'; $myresult .= '<tr>'; $myresult .= '<td colspan=\'2\'><span class=\'reviews\'>'; //check //$numreviews = getreviewcount($brand,$model,'mobile_user_reviews'); if($numreviews > 0) { $myresult .= '<a href=\'mobilereviews?alias='.rawurlencode($alias).'\'> <span>$numreviews Reviews</span></a>'; } else { $myresult .= " $numreviews Reviews"; } $myresult .= "</span></td>"; $myresult .= "</tr>"; */ $myresult .= "</tbody>"; /* review show hide - end */ /* count show hide */ $myresult .= '<tbody '.$showcount.'>'; $myresult .= '<tr>'; $myresult .= '<td colspan=\'2\'><span class=\'reviews\'>'; //check //$totalvotes = gettotalvotes($row['property1'],$row['property2'],'mobile_rating'); $myresult .= "</td>"; $myresult .= "</tr>"; $myresult .= "</tbody>"; /* count show hide - end */ $myresult .= "</table></td>"; /* end table 4 */ $myresult .= '</tr>'; /* end 1 row and remaining tr , td ,table */ $myresult .= '</table></td>'; $myresult .= '</tr>'; /* remianing only 1 table */ /* ratings - positive last section starts here */ $max= array(); for ($l = 1 ; $l < 15; $l++){ if($row_product['property'.$l.'_avg']){ $maxarray = 0; $maxarray = $row_product['property'.$l.'_avg']; $max['rating'.$l.'_name'] = $maxarray; } } if(count($max) >0 ) { include('all_include_files/min_max_properties.php'); } if(($row_product['freshness'] <= strtotime("-3 month"))) { $image_type= 'old'; } else if(($row_product['freshness'] <= strtotime("-2 month"))) { $image_type= 'bitold'; } else if(($row_product['freshness'] <= strtotime("-1 month")) || ($row_product['freshness'] > strtotime("-1 month"))) { $image_type= 'new'; } $img_name = $image_type; $myresult .= "<tr>"; $myresult .= "<td>"; $myresult .= "<table width='100%' border='0'>"; $myresult .= "<tr>"; $myresult .= "<td width='170' class=\"ratingz\"><span><u>Overall rating</u></span></td>"; $myresult .= "<td width='150' class=\"ratingz\"><span><u>Positive</u></span></td>"; $myresult .= "<td width='150' class=\"ratingz\"><span><u>Negative</u></span></td>"; if($img_name == 'new'){ $images = "<img src='/sites/default/files/battery-discharging-100.png' width='40' height='40'></img>"; } else if($img_name == 'bitold'){ $images = "<img src='/sites/default/files/battery-discharging-80.png' width='40' height='40'></img>"; } else if($img_name == 'old'){ $images = "<img src='/sites/default/files/battery-discharging-0.png' width='40' height='40'></img>"; } else { $images = ""; } $myresult .= "<td rowspan='2'><p ".$showbattery.">". $images ."</p></td>"; $myresult .= "</tr>"; $myresult .= "<tr>"; $myresult .= "<td>"; $i++; for($k = 0.5; $k <= 10.0; $k+=0.5) { $overall = roundOff($row_product['overall_rating']); if($overall == $k) { $chk ="checked"; } else { $chk = ""; } $myresult .= '<input class=\'star {split:2}\' type=\'radio\' value=\''. $k .'\' '.$chk.' title=\''. $k.' out of 10 \' disabled />'; } $myresult .= '</td>'; $myresult .= '<td ><span>'.$positive.'</span></td>'; $myresult .= '<td ><span>'.$negative.'</span></td>'; $myresult .= '</tr>'; $myresult .= '</table></td>'; $myresult .= '</tr>'; /* ratings - positive last section ends here */ $myresult .= '<tr>'; if($row_product['description'] != ""){ if(words_count($row_product['description']) > 8){ $myresult .= '<td><p><span class=\'description\'><strong><u>Description</u>:</strong></span>&nbsp;&nbsp; <div class=\'expandable\'><p>'.$row_product['description'].'</div></p></p></td>'; } else { $myresult .= '<td><p><span class=\'description\'><strong><u>Description</u>:</strong></span>&nbsp;&nbsp;'. $row_product['description'] .'</p></td>'; } } $myresult .= '</tr>'; $myresult .= '</table>'; /* end 1st table */ $myresult .= '</div>'; /* start actual product display - end*/ /*start the form to take ratings */ $myresult .= '<div id=\'tabs\'>'; $myresult .= '<ul>'; $myresult .= '<li><a href=\'#tab-1\'>Ratings</a></li>'; $myresult .= '<li><a href=\'#tab-2\'>Click here to rate</a></li>'; $myresult .= '</ul>'; $myresult .= '<div id=\'tab-1\'>'; /* actual rating table - start - jsut display ratings */ $myresult .= '<table id=\'rounded-corner\'>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th width=\'30%\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Ratings</span></th>'; $myresult .= '<th width=\'70%\' colspan=\'2\'class=\'rounded-q4\' scope=\'col\'><a href=\'#rounded-corner\' id=\'clickit\' style=\'color:white;text-decoration:underline;\' $disabled ></a></th> '; /*$myresult .= '<th width=\'70%\' colspan=\'2\'class=\'rounded-q4\' scope=\'col\'><a href=\'#rounded-corner\' id=\'clickit\' style=\'color:white;text-decoration:underline;\' $disabled >Click here to rate</a></th> ';*/ $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ /* tbody - start */ $myresult .= '<tbody>'; /*start printing the table wth feature and ratings */ for ($i = 1 ; $i < $numProperties; $i++){ if($master_rating_properties['rating'.$i.'_name']){ $myresult .= '<tr>'; $myresult .= '<td width=\'22%\'>'; $indfeature = 0; $indfeature = $row_product['property'.$i.'_avg']; $myresult .= $master_rating_properties['rating'.$i.'_name'].' ( '.$indfeature .')'; $myresult .= '</td>'; $myresult .= '<td colspan=\'0\' width=\'38%\' >'; $tocheck = $indfeature; for($k = 0.5; $k <= 10.0; $k+=0.5){ $tocheck = roundOff($tocheck); if(($tocheck) == $k) { $chk = "checked"; } else { $chk = ""; } $myresult .= '<input class=\'star {split:2}\' type=\'radio\' name=\'drating'.$i.'\' id=\'drating'.$i.''.$k.'\' value=\''. $k .'\' '.$chk.' title=\''. $k.' out of 10 \' disabled \'/>'; } /* for k loop end */ $myresult .= '</tr>'; } /* end if loop */ } /* end i for loop */ $myresult .= '</tbody>'; /* end tbody */ /* footer round corner start */ $myresult .= '<tfoot>'; $myresult .= '<tr>'; $myresult .= '<td class=\'rounded-foot-left\'>&nbsp;</td>'; $myresult .= '<td class=\'rounded-foot-right\' colspan=\'4\' >'; $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '</tfoot>'; $myresult .= '</table>'; /*round corner table end */ $myresult .= '</div>'; /*end 1st tab */ /*start 2nd tab */ $myresult .= '<div id=\'tab-2\'>'; $myresult .= '<form name =\'form1\' id=\'form1\' method = \'POST\' action=\''.$_SERVER['php_self'] .'\'>'; /* actual rating table - start - actual rate/update */ $myresult .= '<table id=\'rounded-corner\'>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th width=\'30%\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Ratings</span></th>'; $myresult .= '<th width=\'70%\' colspan=\'2\'class=\'rounded-q4\' scope=\'col\'></th>'; $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ /* tbody - start */ $myresult .= '<tbody>'; unset($i); /*start printing the table wth feature and ratings */ for ($i = 1 ; $i < $numProperties; $i++){ if($master_rating_properties['rating'.$i.'_name']){ $myresult .= '<tr>'; /*fetch ratings and comments - 1st make it to null */ $indfeature = 0; $comment = ''; $indfeature = $user_ratings['rating'.$i]; if($indfeature == NULL){ $indfeature = 0; } $comment = $user_ratings['rating'.$i.'_comment']; $myresult .= '<td width=\'22%\'>'; $myresult .= $master_rating_properties['rating'.$i.'_name'].' ( '.$indfeature.' )'; $myresult .= '</td>'; $myresult .= '<td colspan=\'0\' width=\'38%\' >'; if(($userId != '0') && (is_array($user_ratings))) { $tocheck = $indfeature; } else { $tocheck = '0'; } for($k = 0.5; $k <= 10.0; $k+=0.5){ $tocheck = roundOff($tocheck); if(($tocheck) == $k) { $chk = "checked"; } else { $chk = ""; } $myresult .= '<input class=\'star {split:2}\' type=\'radio\' name=\'rating'.$i.'\' id=\'rating'.$i.''.$k.'\' value=\''. $k .'\' '.$chk.' title=\''. $k.' out of 10 \' '.$disabled.' \' />'; } /* for k loop end */ $myresult .= '</td>'; $myresult .= '<td width=\'40%\'>'; $myresult .= '<input title=\'Reason for this Rating.. \'type=\'text\' size=\'25\' name=\'comment'.$i.'\' id=\'comment'.$i.'\' style=\'display:;\' maxlength=\'255\' value="'.$comment.'">'; $myresult .= '</td>'; $myresult .= '</tr>'; } /* end if loop */ } /* end i for loop */ $myresult .= '</tbody>'; /* end tbody */ /* footer round corner start */ $myresult .= '<tfoot>'; $myresult .= '<tr>'; $myresult .= '<td class=\'rounded-foot-left\'>&nbsp;</td>'; $myresult .= '<td class=\'rounded-foot-right\' colspan=\'4\' >'; if(($userId != '0') && (is_array($user_ratings))) { $myresult .= '<input type=\'button\' id=\'update_form\' value=\'Update\'>'; } else { $myresult .= '<input type=\'button\' id=\'save_form\' value=\'Save\'>'; } $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '</tfoot>'; $myresult .= '</table>'; /*round corner table end */ $myresult .= '</form>'; /*end the form to take ratings */ $myresult .= '</div>'; /*end 2nd tab */ $myresult .= '</div>'; /*end tabs div */ /* actual rating table - end */ /* 1st form ends here id- ratings_form */ } /* end of if loop result_product loop */ /* start table 3 - overall comment*/ $myresult .= '<table border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'width:580px; table-layout:fixed;\' id=\'rounded-corner\'>'; $myresult .= '<tbody>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th width=\'100%\' colspan=\'2\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Overall Comments</span></th>'; $myresult .= '<th colspan=\'3\' class=\'rounded-q4\' scope=\'col\'></th>'; $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ $myresult .= '<tr>'; $myresult .= '<td colspan=\'4\'>'; $myresult .= '<textarea title=\'OverAll Comment\' name=\'overall_comment\' cols=\'65\'></textarea>'; $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '<tbody>'; $myresult .= '</table>'; /* end table 3 - overall comment*/ /* start table 4 - summary*/ $myresult .= '<table border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'width:580px; table-layout:fixed;\' id=\'rounded-corner\'>'; $myresult .= '<tbody>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th colspan=\'2\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Your Opinion</span></th>'; $myresult .= '<th colspan=\'2\'class=\'rounded-q4\' scope=\'col\'></th>'; $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ $myresult .= '<tr>'; $myresult .= '<td colspan=\'2\'>'; $myresult .= 'Do you Agree with the Ratings'; $myresult .= '</td>'; $myresult .= '<td colspan=\'2\'>'; $myresult .= 'Was the Information Helpful'; $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '<tr>'; $myresult .= '<form name=\'form2\' id=\'form2\' method=\'post\'>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'agree\' value=\'agree\'>'; $myresult .= '</td>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'disagree\' value=\'disagree\'>'; $myresult .= '</td>'; $myresult .= '<input type=\'hidden\' name=\'agree_disagree\' id=\'agree_disagree\'>'; $myresult .= '</form>'; $myresult .= '<form name=\'form3\' id=\'form3\' method=\'post\'>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'helpful\' value=\'Helpful\'>'; $myresult .= '</td>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'nothelpful\' value=\'Not Helpful\'>'; $myresult .= '</td>'; $myresult .= '<input type=\'hidden\' name=\'help_nohelp\' id=\'help_nohelp\'>'; $myresult .= '</form>'; $myresult .= '</tr>'; $myresult .= '</tbody>'; $myresult .= '</table>'; /*end table 4 summary table */ $myresult .= '</div>'; /* Actual Form or Page - end */ echo $myresult; //echo 'Product: '.$product; //echo '<br/>Alias: '.$alias; ?> hey this code is working fine for me . as required. the star class code is taken from http://www.fyneworks.com/jquery/star-rating/ ... it works well.. but when i insert code to add tabs for content ,the starts is not visible at all. but when i check source code. the stars are actually there . dono whats the prob. any suggestions on this this is the tabs code $('#tabs div').hide(); ('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function() { $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; });

    Read the article

< Previous Page | 32 33 34 35 36 37 38 39 40 41 42 43  | Next Page >