Search Results

Search found 2947 results on 118 pages for 'li'.

Page 112/118 | < Previous Page | 108 109 110 111 112 113 114 115 116 117 118  | Next Page >

  • jQuery scrolling UL with hidden overflow

    - by papermate
    I have a UL with LI's set to display horizontally. The UL has a fixed width and it's set to hide the overflow. This is so I can display my images, which are to be used in a gallery, neatly. It works and looks nice. I want to, however, use jQuery to scroll the contents of the UL rather than set the overflow property to auto and be presented with those ugly scroll bars. I recycled some code I used to do the same thing a few weeks back but, back then, I was doing it in DIV's. Much easier, apparently. $('.gallery_container span').hover( function() { if ($(this).attr('class') == 'up') direction = '-='; else direction = '+='; var divOffset = $('ul.gallery').offset().top; $('ul.gallery').animate({scrollTop: direction + divOffset}, 5000); }, function() { $('ul.gallery').stop(); }); I saw a site that says the scrollTop property can be applied to UL's. So I'm not sure what exactly is causing this not to work. Any ideas? EDIT: Found what was causing it to not work at all but not it scrolls vertically - Kind of expected that. Is there any way to scroll it horizontally?

    Read the article

  • javascript to reference input IDs in php loop and pass values back to same input ID

    - by Smudger
    I have a form which is essentially an autocomplete input box. I can get this to work perfectly for a single text box. What I need to do is create unique input boxes by using a php for loop. This will use the counter $i to give each input box a unique name and id. The problem is that the unique value of the input box needs to be passed to the javascript. this will then pass the inputted data to the external php page and return the mysql results. As mentioned I have this working for a single input box but need assistance with passing the correct values to the javascript and returning it to correct input box. existing code for working solution (first row works only, all other rows update first row input box) <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function lookup(inputString) { if(inputString.length == 0) { // Hide the suggestion box. $('#suggestions').hide(); } else { $.post("autocompleteperson.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { $('#suggestions').show(); $('#autoSuggestionsList').html(data); } }); } } // lookup function fill(thisValue) { $('#inputString').val(thisValue); setTimeout("$('#suggestions').hide();", 200); } </script> </head> <body> <form name="form1" id="form1" action="addepartment.php" method="post"> <table> <? for ( $i = 1; $i <=10; $i++ ) { ?> <tr> <td> <? echo $i; ?></td> <td> <div> <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" /> </div> <div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" /> <div class="suggestionList" id="autoSuggestionsList"> &nbsp; </div> </div> </td> </tr> <? } ?> </table> </body> </html> code for autocompleteperson.php is: $query = $db->query("SELECT fullname FROM Persons WHERE fullname LIKE '$queryString%' LIMIT 10"); if($query) { while ($result = $query ->fetch_object()) { echo '<li onClick="fill(\''.$result->fullname.'\');">'.$result->fullname.'</li>'; } } in order to get it to work for all rows, I include the counter $i in each of the file names as below: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function lookup(inputString<? echo $i; ?>) { if(inputString<? echo $i; ?>.length == 0) { // Hide the suggestion box. $('#suggestions<? echo $i; ?>').hide(); } else { $.post("autocompleteperson.php", {queryString: ""+inputString<? echo $i; ?>+""}, function(data){ if(data.length >0) { $('#suggestions<? echo $i; ?>').show(); $('#autoSuggestionsList<? echo $i; ?>').html(data); } }); } } // lookup function fill(thisValue) { $('#inputString<? echo $i; ?>').val(thisValue); setTimeout("$('#suggestions<? echo $i; ?>').hide();", 200); } </script> </head> <body> <form name="form1" id="form1" action="addepartment.php" method="post"> <table> <? for ( $i = 1; $i <=10; $i++ ) { ?> <tr> <td> <? echo $i; ?></td> <td> <div> <input type="text" size="30" value="" id="inputString<? echo $i; ?>" onkeyup="lookup(this.value);" onblur="fill();" /> </div> <div class="suggestionsBox" id="suggestions<? echo $i; ?>" style="display: none;"> <img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" /> <div class="suggestionList" id="autoSuggestionsList<? echo $i; ?>"> &nbsp; </div> </div> </td> </tr> <? } ?> </table> </body> </html> The autocomplete suggestion works (although always shown on first row) but when selecting the data always returns to row 1, even if input was on row 5. I have a feeling this has to do with the fill() but not sure? is it due the the autocomplete page code? or does the fill referencing ThisValue have something to do with it. example of this page (as above) can be found here Thanks for the assistance, much appreciated. UPDATE - LOLO <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function lookup(i, inputString) { if(inputValue.length == 0) { // Hide the suggestion box. $('#suggestions' + i).hide(); } else { $.post("autocompleteperson.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { $('#suggestions' + i).show(); $('#autoSuggestionsList' + i).html(data); } }); } } // lookup function fill(i, thisValue) { $('#inputString' + i).val(thisValue); setTimeout("$('#suggestions' + i).hide();", 200); } </script> </head> <body> <form name="form1" id="form1" action="addepartment.php" method="post"> <table> <? for ( $i = 1; $i <=10; $i++ ) { ?> <tr> <td> <? echo $i; ?></td> <td> <div> <input type="text" size="30" value="" id="inputString<?php echo $i; ?>" onkeyup="lookup(this.value);" onblur="fill();" /> </div> <div class="suggestionsBox" id="suggestions<? echo $i; ?>" style="display: none;"> <img src="upArrow.png" style="position: relative; top: -12px; left: 20px;" alt="upArrow" /> <div class="suggestionList" id="autoSuggestionsList<? echo $i; ?>"> &nbsp; </div> </div> </td> </tr> <? } ?> </table> </body> </html> google chrome catched the following errors: first line on input, second line on loosing focus

    Read the article

  • Multiple autocompletes on same form in socialengine

    - by Mirza Awais
    I am quite new to socialegine module development. I want to use multiple autocomplets on my one form. I have no problem of showing multiple auto completes but problem comes when one selects options from auto complete. I have seen that autocompet.js uses id toValues to show selected option from autocomlte. So if there is only one autocomplete on one form then we can have one element as toValues to show the selected value. But if we have multiple auto completes then how to show the selected item of each auto complete as separately? Using the following code for autocomplete en4.core.runonce.add(function() { new Autocompleter.Request.JSON('to', '<?php echo $this->url(array('module' => 'localspots', 'controller' => 'lookup', 'action' => 'city'), 'default', true) ?>', { 'minLength': 2, 'delay' : 1, 'selectMode': 'pick', 'autocompleteType': 'message', 'multiple': false, 'className': 'message-autosuggest', 'filterSubset' : true, 'tokenFormat' : 'object', 'tokenValueKey' : 'label', 'injectChoice': function(token){ console.log(token.type); var choice = new Element('li', {'class': 'autocompleter-choices', 'html': token.photo, 'id':token.label}); new Element('div', {'html': this.markQueryValue(token.label),'class': 'autocompleter-choice'}).inject(choice); this.addChoiceEvents(choice).inject(this.choices); choice.store('autocompleteChoice', token); }, onPush : function(){ if( $('toValues').value.split(',').length >= maxRecipients ){ $('to').disabled = true; $('to').setAttribute("class", "disabled"); } }, }); });

    Read the article

  • Customize jQuery.aptags plugin - mouseclick submit from .ac_results list

    - by atmorell
    Hello, I am using jquery.autocomplete.js and jquery.apitags to select a few elements from a div (.ac_results) This works great, and I can select multiple elements etc. However the jquery-aptags plugin does only fire when enter is pressed. This might confuse some users if they use the mouse to click instead of the arrows/enter on the keyboard. I think this is the code inside jquery.aptags that submits the tag. // // Hook to the keypress event. // $(this).bind('keypress', { __c: __c }, function (e) { var c = ''; var i = 0; var v = $(this).val(); if (e.keyCode == 13) { e.stopPropagation(); e.preventDefault(); __createSpans(this, v, e.data.__c, true); } }); I am wondering if it is possible to call the method directly from a new event. $('.ac_results > ul > li').livequery(function() { $(this).bind('click', function() { $('#address_city'). //how do I fire the "enter" event from here? }); }); Any thoughts?

    Read the article

  • How to use jQuery .live() with ajax

    - by kylemac
    Currently I am using John Resig's LiveQuery plugin/function - http://ejohn.org/blog/jquery-livesearch/ - to allow users to sort through a long unordered-list of list-items. The code is as follows: $('input#q').liveUpdate('ul#teams').focus(); The issue arises when I use ajaxified tabs to sort the lists. Essentially I use ajax to pull in different lists and the liveUpdate() function doesn't have access to the new li's. I assume I would need to bind this using the .live() function - http://api.jquery.com/live/. But I am unclear how to bind this to an ajax event, I've only used the "click" event. How would I bind the new liveUpdate() to the newly loaded list-items? EDIT: The ajax tabs is run through the wordpress ajax api so the code is fairly complex, but simplified it is something like this: $('div.item-list-tabs').click( function(event) { var target = $(event.target).parent(); var data = {action, scope, pagination}; // Passes action to WP that loads my tab data $.post( ajaxurl, data, function(response) { $(target).fadeOut( 100, function() { $(this).html(response); $(this).fadeIn(100); }); }); return false; }); This is simplified for the sake of this conversation, but basically once the $.post loads the response in place .liveUpdate() doesn't have access to it. I believe the .live() function is the answer to this problem, I'm just unclear on how to implement it with the $.post()

    Read the article

  • php file path of server

    - by Jacksta
    I am trying to get this script to work. it opens up a directry and lists the files in the directory. I have copied this code from somewhere else and the problem is that this php file is hosted on an apache server not my localhost. what is the correct $dir_name = "c:/"; to use? The file is in this directory /domains/domainxxxx.com.au/public_html/lsitfiles.php so would I use domainxxxx.com.au/public_html/lsitfiles.php ? <?php $dir_name = "c:/"; $dir = opendir($dir_name); $file_list = "<ul>"; while ($file_name = readdir($dir)) { if(($file_name != ".") && (file_name != "..")) { $file_list .= "<li>$file_name"; } } $file_list.= "<ul>"; closedir($dir); ?> <HTML> <BODY> <p>Files in: <? echo "$dir_name"; ?></p> <? echo "$file_list"; ?> </BODY> </HTML>

    Read the article

  • Can someone help me with m Django localization?

    - by alex
    I have a template with has text in it. It's located in /templates under my project directory. I'm trying to do Japanese now. I create a directory called "locale" in my project directory. Then, I set up this in my settings: gettext = lambda s: s LANGUAGES = ( ('de', gettext('German')), ('en', gettext('English')), ('ja', gettext('Japanese')), ) After that, I run this command: django-admin.py makemessages -l ja The only problem is, this doesn't work! In my locale/ja/LC_MESSAGES/django.po: Isn't it supposed to scan my templates with .html extension and grab all the strings? # SOME DESCRIPTIVE TITLE. # Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER # This file is distributed under the same license as the PACKAGE package. # FIRST AUTHOR <EMAIL@ADDRESS>, YEAR. # #, fuzzy msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "Report-Msgid-Bugs-To: \n" "POT-Creation-Date: 2010-05-20 22:45+0000\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" "Language-Team: LANGUAGE <[email protected]>\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" #: settings.py:101 msgid "German" msgstr "" #: settings.py:102 msgid "English" msgstr "" #: settings.py:103 msgid "Japanese" msgstr ""

    Read the article

  • Rails CSS not Loading using Heroku

    - by eWizardII
    I have the following site set up here on Heroku - http://www.peerinstruction.net/users/sign_up the issue is that I have updated the css yet it is not being actively reflected on the site, it just shows a textbox, with some edited/custom fonts. I have attached the css file in the following gist - https://gist.github.com/f74b626c54ecbb60bbde The signup page controller: !!! Strict %html %head %title= yield(:title) || "Untitled" = stylesheet_link_tag 'application', 'web-app-theme/base', 'web-app-theme/themes/activo/style', 'web-app-theme/override' = javascript_include_tag :defaults = csrf_meta_tag = yield(:head) %body #container #header %h1 %a{:href => "/"} Peer Instruction Network #user-navigation %ul.wat-cf %li .content.login .flash - flash.each do |type, message| %div{ :class => "message #{type}" } %p= message = form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => { :class => "form login" }) do |f| .group.wat-cf .left= f.label :email, :class => "label right" .right= f.text_field :email, :class => "text_field" .group.wat-cf .left= f.label :password, :class => "label right" .right= f.password_field :password, :class => "text_field" .group.wat-cf .right %button.button{ :type => "submit" } Login /= link_to "Sign In", destroy_user_session_path #box = yield The signup pages haml file: %h2 .block .content.login .flash - flash.each do |type, message| %div{ :class => "message #{type}" } %p= message = form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| = devise_error_messages! %div = f.label :firstname %br/ = f.text_field :firstname %div = f.label :middlename %br/ = f.text_field :middlename %div = f.label :lastname %br/ = f.text_field :lastname %div = f.label :email %br/ = f.email_field :email %div = f.label :password %br/ = f.password_field :password %div = f.label :academic %br/ = f.text_field :academic %div= f.submit "Continue" = render :partial => "devise/shared/links" I used web-app-theme to create an activo theme and then modify it.

    Read the article

  • JSF 2.0 Dynamic Views

    - by Robe Eleckers
    Hello, I'm working on a web project which uses JSF 2.0, PrimeFaces and PrettyFaces as main frameworks / libraries. The pages have the following (common) structure: Header, Content, Footer. Header: The Header always contains the same menu. This menu is a custom component, which generates a recursive html <ul><li> list containing <a href="url"> html links, this is all rendered with a custom renderer. The link looks like 'domain.com/website/datatable.xhtml?ref=2'. Where the ref=2 used to load the correct content from the database. I use prettyfaces to store this request value in a backingbean. Question 1: Is it ok to render the <a href> links myself, or should I better add an HTMLCommandLink from my UIComponent and render that in the encodeBegin/End? Question 2: I think passing variables like this is not really the JSF 2.0 style, how to do this in a better way? Content: The content contains dynamic data. It can be a (primefaces) datatable, build with dynamic data from the database. It can also be a text page, also loaded from the database. Or a series of graphs. You got the point, it's dynamic. The content is based on the link pressed in the header menu. If the content is of type datatable, then I put the ref=2 variable to a DataTableBean (via prettyfaces), which then loads the correct datatable from the database. If the content is of type chart, I'll put it on the ChartBean. Question 3: Is this a normal setup? Ideally I would like to update my content via Ajax. I hope it's clear :)

    Read the article

  • Javascript function to add class to a list element based on # in url.

    - by Jason
    I am trying to create a javascript function to add and remove a class to a list element based on the #tag at the end of the url on a page. The page has several different states, each with a different # in the url. I am currently using this script to change the style of a given element based on the # in the url when the user first loads the page, however if the user navigates to a different section of the page the style added on the page load stays, I would like it to change. <script type="text/javascript"> var hash=location.hash.substring(1); if (hash == 'strategy'){ document.getElementById('strategy_link').style.backgroundPosition ="-50px"; } if (hash == 'branding'){ document.getElementById('branding_link').style.backgroundPosition ="-50px"; } if (hash == 'marketing'){ document.getElementById('marketing_link').style.backgroundPosition ="-50px"; } if (hash == 'media'){ document.getElementById('media_link').style.backgroundPosition ="-50px"; } if (hash == 'management'){ document.getElementById('mangement_link').style.backgroundPosition ="-50px"; } if (hash == ''){ document.getElementById('shop1').style.display ="block"; } </script> Additionally, I am using a function to change the class of the element onClick, but when a user comes to a specific # on the page directly from another page and then clicks to a different location, two elements appear active. <script type="text/javascript"> function selectInList(obj) { $("#circularMenu").children("li").removeClass("highlight"); $(obj).addClass("highlight"); } </script> You can see this here: http://www.perksconsulting.com/dev/capabilities.php#branding Thanks.

    Read the article

  • Accomplishing This Style of Drop-Down Menus in jQuery

    - by Maxim Z.
    I was browsing the web and found this site. I noticed how the nav bar drop-down works, and I want to implement something similar on my website. Afer going into the source code of the page, I found that those drop-down areas are contained in divs with class fOut. It turns out that this is being done with MooTools. Here is the script itself (referenced in the original page after the Mootools script itself): window.addEvent('domready', function() { $("primaryNav").getChildren("li").addEvents({ "mouseenter": function(){ $(this).addClass("hover").getChildren("a").addClass("hover"); }, "mouseleave": function(){ $(this).removeClass("hover").getChildren("a").removeClass("hover"); } }); $$(".fOut").each(function(el,i){ var ifr = $(document.createElement("iframe")); ifr.className = "ieBgIframe"; ifr.frameBorder = "0"; ifr.src="about:blank"; ifr.injectInside(el); var p = el.getParent(); p.addClass("hover"); var h = el.getSize().size.y; p.removeClass("hover"); ifr.height=h; }); $$(".olderVersionsToggle").addEvents({ "click": function(e){ var event = new Event(e); event.stop(); var p = $(this).getParent().getNext(); if(p.hasClass("open")){ p.removeClass("open"); $(this).setText("Show previous versions..."); } else{ p.addClass("open"); $(this).setText("Hide previous versions..."); } return false; } }); }); My Question(s) I have two questions about this code. How does it work? I don't quite understand what it's doing, with the iframes and all. How can this be implemented in jQuery?

    Read the article

  • Unobtrusive, self-hosted comments function to put onto existing web pages

    - by Pekka
    I am building a new site which will consist of a mix of dynamic and static pages. I would like to add commenting functionality to those pages with as little work as possible. I'm curious as to whether such a solution exists in PHP. The ideal set of features would be: Completely independent from the surrounding page / site: PHP code gets dropped into page, a page ID is added, done. Simple "write a comment" form Comments for each page are displayed using a PHP function Nice, clean output of <ul><li>.... that can be styled by the surrounding site Optional Captcha Optional Gravatar sensitivity Minimalistic administration area to moderate/delete comments, no ACL, can protect it using .htaccess The ideal integreation would be like this: <?php show_comments("my_page_name"); ?> this would 1. display a form to add a new comment that gets automatically associtated with my_page_name; and 2. display all comments that were made through this form using this ID. Does anybody know a solution like this? Bounty I am setting up a bounty because while there were some good suggestions, they all point to external services. I'm really curious to see whether there isn't anything self-hosted around. If this doesn't exist yet, it sure would be great to see as an Open Source project.

    Read the article

  • Turning PHP page calling Zend functions procedurally into Zend Framework MVC-help!

    - by Joel
    Hi guys, I posted much of this question, but if didn't include all the Zend stuff because I thought it'd be overkill, but now I'm thinking it's not easy to figure out an OO way of doing this without that code... So with that said, please forgive the verbose code. I'm learning how to use MVC and OO in general, and I have a website that is all in PHP but most of the pages are basic static pages. I have already converted them all to views in Zend Framework, and have the Controller and layout set. All is good there. The one remaining page I have is the main reason I did this...it in fact uses Zend library (for gData connection and pulling info from a Google Calendar and displaying it on the page. I don't know enough about this to know where to begin to refactor the code to fit in the Zend Framework MVC model. Any help would be greatly appreciated!! .phtml view page: <div id="dhtmltooltip" align="left"></div> <script src="../js/tooltip.js" type="text/javascript"> </script> <div id="container"> <div id="conten"> <a name="C4"></a> <?php function get_desc_second_part(&$value) { list(,$val_b) = explode('==',$value); $value = trim($val_b); } function filterEventDetails($contentText) { $data = array(); foreach($contentText as $row) { if(strstr($row, 'When: ')) { ##cleaning "when" string to get date in the format "May 28, 2009"## $data['duration'] = str_replace('When: ','',$row); list($when, ) = explode(' to ',$data['duration']); $data['when'] = substr($when,4); if(strlen($data['when'])>13) $data['when'] = trim(str_replace(strrchr($data['when'], ' '),'',$data['when'])); $data['duration'] = substr($data['duration'], 0, strlen($data['duration'])-4); //trimming time zone identifier (UTC etc.) } if(strstr($row, 'Where: ')) { $data['where'] = str_replace('Where: ','',$row); //pr($row); //$where = strstr($row, 'Where: '); //pr($where); } if(strstr($row, 'Event Description: ')) { $event_desc = str_replace('Event Description: ','',$row); //$event_desc = strstr($row, 'Event Description: '); ## Filtering event description and extracting venue, ticket urls etc from it. //$event_desc = str_replace('Event Description: ','',$contentText[3]); $event_desc_array = explode('|',$event_desc); array_walk($event_desc_array,'get_desc_second_part'); //pr($event_desc_array); $data['venue_url'] = $event_desc_array[0]; $data['details'] = $event_desc_array[1]; $data['tickets_url'] = $event_desc_array[2]; $data['tickets_button'] = $event_desc_array[3]; $data['facebook_url'] = $event_desc_array[4]; $data['facebook_icon'] = $event_desc_array[5]; } } return $data; } // load library require_once 'Zend/Loader.php'; Zend_Loader::loadClass('Zend_Gdata'); Zend_Loader::loadClass('Zend_Gdata_ClientLogin'); Zend_Loader::loadClass('Zend_Gdata_Calendar'); Zend_Loader::loadClass('Zend_Http_Client'); // create authenticated HTTP client for Calendar service $gcal = Zend_Gdata_Calendar::AUTH_SERVICE_NAME; $user = "[email protected]"; $pass = "xxxxxxxx"; $client = Zend_Gdata_ClientLogin::getHttpClient($user, $pass, $gcal); $gcal = new Zend_Gdata_Calendar($client); $query = $gcal->newEventQuery(); $query->setUser('[email protected]'); $secondary=true; $query->setVisibility('private'); $query->setProjection('basic'); $query->setOrderby('starttime'); $query->setSortOrder('ascending'); //$query->setFutureevents('true'); $startDate=date('Y-m-d h:i:s'); $endDate="2015-12-31"; $query->setStartMin($startDate); $query->setStartMax($endDate); $query->setMaxResults(30); try { $feed = $gcal->getCalendarEventFeed($query); } catch (Zend_Gdata_App_Exception $e) { echo "Error: " . $e->getResponse(); } ?> <h1><?php echo $feed->title; ?></h1> <?php echo $feed->totalResults; ?> event(s) found. <table width="90%" border="3" align="center"> <tr> <td width="20%" align="center" valign="middle"><b>;DATE</b></td> <td width="25%" align="center" valign="middle"><b>VENUE</b></td> <td width="20%" align="center" valign="middle"><b>CITY</b></td> <td width="20%" align="center" valign="middle"><b>DETAILS</b></td> <td width="15%" align="center" valign="middle"><b>LINKS</b></td> </tr> <?php if((int)$feed->totalResults>0) { //checking if at least one event is there in this date range foreach ($feed as $event) { //iterating through all events //pr($event);die; $contentText = stripslashes($event->content->text); //striping any escape character $contentText = preg_replace('/\<br \/\>[\n\t\s]{1,}\<br \/\>/','<br />',stripslashes($event->content->text)); //replacing multiple breaks with a single break //die(); $contentText = explode('<br />',$contentText); //splitting data by break tag $eventData = filterEventDetails($contentText); $when = $eventData['when']; $where = $eventData['where']; $duration = $eventData['duration']; $venue_url = $eventData['venue_url']; $details = $eventData['details']; $tickets_url = $eventData['tickets_url']; $tickets_button = $eventData['tickets_button']; $facebook_url = $eventData['facebook_url']; $facebook_icon = $eventData['facebook_icon']; $title = stripslashes($event->title); echo '<tr>'; echo '<td width="20%" align="center" valign="middle" nowrap="nowrap">'; echo $when; echo '</td>'; echo '<td width="20%" align="center" valign="middle">'; if($venue_url!='') { echo '<a href="'.$venue_url.'" target="_blank">'.$title.'</a>'; } else { echo $title; } echo '</td>'; echo '<td width="20%" align="center" valign="middle">'; echo $where; echo '</td>'; echo '<td width="20%" align="center" valign="middle">'; $details = str_replace("\n","<br>",htmlentities($details)); $duration = str_replace("\n","<br>",$duration); $detailed_description = "<b>When</b>: <br>".$duration."<br><br>"; $detailed_description .= "<b>Description</b>: <br>".$details; echo '<a href="javascript:void(0);" onmouseover="ddrivetip(\''.$detailed_description.'\')" onmouseout="hideddrivetip()" onclick="return false">View Details</a>'; echo '</td>'; echo '<td width="20%" valign="middle">'; if(trim($tickets_url) !='' && trim($tickets_button)!='') { echo '<a href="'.$tickets_url.'" target="_blank"><img src="'.$tickets_button.'" border="0" ></a>'; } if(trim($facebook_url) !='' && trim($facebook_icon)!='') { echo '<a href="'.$facebook_url.'" target="_blank"><img src="'.$facebook_icon.'" border="0" ></a>'; } else { echo '......'; } echo '</td>'; echo '</tr>'; } } else { //else show 'no event found' message echo '<tr>'; echo '<td width="100%" align="center" valign="middle" colspan="5">'; echo "No event found"; echo '</td>'; } ?> </table> <h3><a href="#pastevents">Scroll down for a list of past shows.</a></h3> <br /> <a name="pastevents"></a> <ul class="pastShows"> <?php $startDate='2005-01-01'; $endDate=date('Y-m-d'); /*$gcal = Zend_Gdata_Calendar::AUTH_SERVICE_NAME; $user = "[email protected]"; $pass = "silverroof10"; $client = Zend_Gdata_ClientLogin::getHttpClient($user, $pass, $gcal); $gcal = new Zend_Gdata_Calendar($client); $query = $gcal->newEventQuery(); $query->setUser('[email protected]'); $query->setVisibility('private'); $query->setProjection('basic');*/ $query->setOrderby('starttime'); $query->setSortOrder('descending'); $query->setFutureevents('false'); $query->setStartMin($startDate); $query->setStartMax($endDate); $query->setMaxResults(1000); try { $feed = $gcal->getCalendarEventFeed($query); } catch (Zend_Gdata_App_Exception $e) { echo "Error: " . $e->getResponse(); } if((int)$feed->totalResults>0) { //checking if at least one event is there in this date range foreach ($feed as $event) { //iterating through all events $contentText = stripslashes($event->content->text); //striping any escape character $contentText = preg_replace('/\<br \/\>[\n\t\s]{1,}\<br \/\>/','<br />',stripslashes($event->content->text)); //replacing multiple breaks with a single break $contentText = explode('<br />',$contentText); //splitting data by break tag $eventData = filterEventDetails($contentText); $when = $eventData['when']; $where = $eventData['where']; $duration = $eventData['duration']; $title = stripslashes($event->title); echo '<li class="pastShows">' . $when . " - " . $title . ", " . $where . '</li>'; } } ?> </div> </div>

    Read the article

  • How do I animate text links in jquery?

    - by Peter
    I am somewhat new to jquery and I have a problem with something I am trying to implement using jquery. I have a vertical navigation menu where each link animates on hover by changing color, increasing letter spacing, and adding a border on the left. Everything is working the way I want it to except for when I click on the link. After I click on the link, the text changes to a different color and remains that same color even when I hover over the link. I am wanting to make it to where the color change on hover remains intact even after I click the link. I'm sure I am missing something simple, but I have tried everything I know to do with no luck. Any suggestions would be helpful! Here is what I have for the animation... <script type="text/javascript"> $(document).ready(function(){ $("ul.navlist li a").hover(function(){ $(this).stop() .animate({paddingLeft: '10px',letterSpacing: '2px',borderWidth:'20px'},{queue:false,easing:'easeInQuad'},50) }, function(){ $(this).stop() .animate({paddingLeft: '0px', letterSpacing: '0px',borderWidth:'0px'},{queue:false,easing:'easeOutQuad'},50) }); }); </script> My css for the navigation list is here... .navlist { list-style: none; } .navlist a { border-left-color: #555555; border-left-style: solid; border-left-width: 0px; color: #c4c4c4; } .navlist a:hover { border-left-color: #555555; border-left-style: solid; color: #555555; }

    Read the article

  • jQuery AJAX Redirection problem

    - by meosoft
    Hello please consider this: On page A I have a link that takes you to page B when JS is off, but when JS is on, I want to replace content on current page with content from the page B. Pages A and B are in fact the same script that is able to tell AJAX calls from regular ones and serve the content appropriately. Everything works fine, as long as there are no redirects involved. But, sometimes there is a 301 redirect and what seems to be happening is that client browser then makes a second request, which will return with a 200 OK. Only the second request is sent without a X-Requested-With header, therefore I cannot tell within my script wether it came from AJAX or not, and will send a complete page instead of just the content. I have tried checking for 301 status code in my error, success, and complete handlers but none of them worked. It seems to be handling the 301 behind the scenes. Could anyone help me with this? jQuery 1.4, PHP 5 Edit: People requested the code to this, which I didn't think was necessary but here goes: // hook up menu ajax loading $('#menu a').live("click", function(){ // update menu highlight if($(this).parents('#menu').size() > 0){ $("#menu>li").removeClass("current_page_item"); $(this).parent().addClass("current_page_item"); } // get the URL where we will be retrieving content from var url = $(this).attr('href'); window.location.hash = hash = url; $.ajax({ type: "GET", url: url, success: function(data){ // search for an ID that is only present if page is requested directly if($(data).find('#maincontent').size() > 0){ data = $(data).find('#maincontent .content-slide *').get(); } // the rest is just animating the content into view $("#scroller").html(data); $('.content-slide').each(setHeight); $('.content-slide').animate({ left: "0px" }, 1000, 'easeOutQuart', function(){ $('#home').css("left", "-760px").html(data); $('#scroller').css("left", "-760px"); $('.content-slide').each(setHeight); } ); } }); return false; });

    Read the article

  • formtastic weird month name display

    - by Alexey Poimtsev
    Hi, i'm using formtastic, all is ok, but strange thing - on = form.input :birthdate, :as => :date it renders to something like <li><label for="profile_birthdate_2i">Month</label><select id="profile_birthdate_2i" name="profile[birthdate(2i)]"> <option value="1">114</option> <option value="2">97</option> <option value="3">110</option> <option value="4">115</option> <option value="5">108</option> <option value="6">97</option> <option value="7">116</option> <option value="8">105</option> <option value="9">111</option> <option value="10">110</option> <option value="11">32</option> <option value="12">109</option> </select> but if i'm using in semantic_form something like = form.datetime_select :birthdate it renders correctly. I've found information, that it may be caused by locale file with no translations for month names, but its so strange - why rails helpers renders month names ok, but formtastic - not :( any ideas?

    Read the article

  • IE6 ignoring active link CSS style

    - by Leah
    The CSS active link style is being correctly applied in IE7, FF, and Safari but is not applied IE6. .side_nav a.active { color:#FFFFFF; background-color:#9F1F63; } Interestingly the background color (background-color:#9F1F63;) is being applied in IE6 but not the font color (color:#FFFFFF;) Any ideas on why this is happening and how I can fix it appreciated. The complete styling for the nav below: .side_nav { text-align : left; margin-left: -10px; } .side_nav ul { list-style-type: none; list-style-position:inside; margin-left:0px; } .side_nav li { margin-top: 10px; display: list-item; list-style-type:none; } .side_nav a, .side_nav a:visited { text-decoration: none; color : #9F1F63; font-weight : bold; padding: 5px 10px 5px 10px; } .side_nav a:hover { color:#B26D7F; } .side_nav a.active { color:#FFFFFF; background-color:#9F1F63; } EDIT: Thanks but the suggestions haven't helped. When I change to a:active the active effect does not work in any browser. I think this might be due to how I have applied the style in the HTML. <div class="side_nav"> <a class="active" href="Page1.aspx">Page1</a><br /> <a href="Page2.aspx">Page2</a><br /> <a href="Page3.aspx">Page3</a><br /> </div>

    Read the article

  • Using CSS to insert text

    - by abelenky
    I'm relatively new to CSS, and have used it to change the style and formatting of text. I would now like to use it to insert text as shown below: <span class="OwnerJoe">reconcile all entries</span> Which I hope I could get to show as: Joe's Task: reconcile all entries That is, simply by virtue of being of class "Owner Joe", I want the text Joe's Task: to be displayed. I could do it with code like: <span class="OwnerJoe">Joe's Task:</span> reconcile all entries. But that seems awfully redundant to both specify the class and the text. Is it possible to do what I'm looking for? EDIT One idea is to try to set it up as a ListItem <li> where the "bullet" is the text "Joe's Task". I see examples of how to set various bullet-styles and even images for bullets. Is it possible to use a small block of text for the list-bullet?

    Read the article

  • Sorting by custom field and fetching whole tree from DB

    - by Niaxon
    Hello everyone, I am trying to do file browser in a tree form and have a problem to sort it somehow. I use PHP and MySQL for that. I've created mixed (nested set + adjacency) table 'element' with the following fields: element_id, left_key, right_key, level, parent_id, element_name, element_type (enum: 'folder','file'), element_size. Let's not discuss right now that it is better to move information about element (name, type, size) into other table. Function to scan specified directory and fill table work correctly. Noteworthy, i am adding elements to tree in specific order: folders first and then files. After that i can easily fetch and display whole table on the page using simple query: SELECT * FROM element WHERE 1=1 ORDER BY left_key With the result of that query and another function i can generate correct html code (<ul><li>... and so on). to display tree. Now back to the question (finally, huh?). I am struggling to add sorting functionality. For example i want to order my result by size. Here i need to keep in my mind whole hierarchy of tree and rule: folders first, files later. I believe i can do that by generating in PHP recursive query: SELECT * FROM element WHERE parent_id = {$parentId} ORDER BY element_type (so folders would be first), size (or name for example) asc/desc After that for each result which has type = 'folder' i will send another query to get it's content. Also it's possible to fetch whole tree by left_key and after that sort it in PHP as array but i guess that would be worse :) I wonder if there is better and more efficient way to do such a thing?

    Read the article

  • Backbone.js Collection Iteration Using .each()

    - by the_archer
    I've been doing some Backbone.js coding and have come across a particular problem where I am having trouble iterating over the contents of a collection. The line Tasker_TodoList.each(this.addOne, this);in the addAll function in AppView is not executing properly for some reason, throwing the error: Uncaught TypeError: undefined is not a function the code in question is: $(function() { var Todo = Backbone.Model.extend({ defaults: { title: "Some Title...", status: 0 //not completed } }); var TodoList = Backbone.Collection.extend({ model: Todo, localStorage: new Store('tasker') }); var Tasker_TodoList = new TodoList(); var TodoView = Backbone.View.extend({ tagName: 'li', template: _.template($('#todoTemplate').html()), events: { 'click .delbtn': 'delTodo' }, initialize: function(){ console.log("a new todo initialized"); //this.model.on('change', this.render, this); }, render: function(){ this.$el.html(this.template(this.model.toJSON())); return this; }, delTodo: function(){ console.log("deleted todo"); } }); var AppView = Backbone.View.extend({ el: 'body', events: { 'click #addBtn': 'createOnClick' }, initialize: function(){ Tasker_TodoList.fetch(); Tasker_TodoList.on('add', this.addAll); console.log(Tasker_TodoList); }, addAll: function(){ $('#tasksList').html(''); console.log("boooooooma"); Tasker_TodoList.each(this.addOne, this); }, addOne: function(todo){ console.log(todo); }, createOnClick: function(){ Tasker_TodoList.create(); } }); var Tasker = new AppView(); }); can somebody help me in finding out what I am doing wrong? Thank you all for your help :-)

    Read the article

  • CKEditor doesn't apply inline styles to links

    - by jomanlk
    I'm using ckeditor version 3 as a text editor to create markup to be sent through email. This means that I have to have all the styles inline and anything that needs to be styled will definitely need the style applied. I'm currently using addStylesSet to generate custom styles that can be applied to elements. The problem I have is that although this works on most elements, styles don't seem to be applied to <a> <ol> <ul> and <li> I really need to be able to apply inline styles to these elements as well. I've been looking at the examples on the ckeditor site, but even they just seem to be wrapping a <span> around the link. Is there anyway I can apply inline styles to <a> tags or failing that, can I just give ckeditor a bunch of classes that can be applied to any tag (Like TinyMCE does with it's link to an external css file)? so that I can at least do a textreplace on them to get the styles inline? I haven't pasted any code here because it's exactly the same as what's been done on the ckeditor site.

    Read the article

  • Loading an FLV in Facebox with jQuery for IE7 and IE8

    - by Trip
    It goes almost without saying, this works perfectly in Chrome, Firefox, and Safari. IE (any version) being the problem. Objective: I am trying to load JWplayer which loads an FLV from S3 in a Facebox popup. jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox() }) HTML (haml): %li#videoGirl = link_to 'What is HQchannel?', '#player', :rel => 'facebox' .grid_8.omega.alpha#player{:style => 'display: none;'} :javascript var so = new SWFObject('/flash/playerTrans.swf','mpl','640px','360px','0'); so.addParam('allowscriptaccess','always'); so.addParam('allowfullscreen','true'); so.addParam('wmode','transparent'); so.addVariable('file', 'http://hometownquarterlyvideos.s3.amazonaws.com/whatishqchannel.flv&autostart=true&controlbar=none&repeat=always&image=/flash/video_girl/whatishqchannel.jpg&icons=false&screencolor=none&backcolor=FFFFFF&screenalpha=0&overstretch'); so.addVariable('overstretch', 'true') so.write('player'); Problem: Despite the video being set to display: none;. It begins playing anyway. When clicking on the activation div, IE7 pops up a wrong sized blank div with a nav (params are set to not show nav and scrubber), and no buttons on the nav and srubber work. IE8 shows the right size but same behavior with nav and scrubber not working, and blank screen. My guess: I'm thinking that the problem is with the javascript not being called at the right times. It seems it's loading the facebox without the jwplayer. At least I assume. Hence the reason why the nav is there. I thinking that it did not read the javascript for that.

    Read the article

  • how can i have a working dropdownlist with links from a csv in php

    - by Mark Dekker
    I have a website that loads a CSV, divides it into parts, and shows these parts. There are 7 parts, and since it is for a music store it is sliced like this: the name of the product the subname the price the stock in one shop the stock of the other shop the group name the brandname What i have now is that it shows 12 products on 1 page, with a next and previous link on top of the page. The pages are made with the group name, every group has it's own page, so you have a drums page, guitar page, speaker page. That all works great. What i programmed in there is a dropdownlist, it drops down a list of brandnames, which should narrow the search for a person who is looking at the products. Problem is right now, that the dropdown menu works, i see the brands, but they are NONE clickable, only the brands that are currently on the page are shown, so NOT all the brands from that group are shown, only the 12 that are currently showing, when you press next, it shows 12 more brands, but i want them to be shown right on the start. And the third problem is, when it is showing the brands, it shows them double or triple, depending on how many products have the same brand. Is there a way what i want, with this code as a basis ? <html> <body bgcolor=#E2E965 link=black vlink=black alink=black text=#D5DF23> <style type="text/css"> #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav li { float: left; width: 120px; } #nav ul { position: absolute; width: 120px; left: -1000px; } #nav li:hover ul { left: auto; } <!-- a {text-decoration:none} //--> body { scrollbar-arrow-color: #E2E965; scrollbar-face-color: #D7182A; scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #D6DF23; scrollbar-shadow-color: #00000; scrollbar-darkshadow-color: #00000; scrollbar-track-color: #D6DF23; } input:link {text-decoration: none; color: #E2E965;} input:visited {text-decoration: none; color: #E2E965;} input:active {text-decoration: none; color: #E2E965;} .spacer_black { margin: 0px; padding: 0px; border: 5px; height: 2px; width: 100%; line-height: 0px; font-size: 0px; background-color: #000000;} </style> <table width=800 border=0><td> </html> <?PHP $offset = isset($_GET['offset'])?$_GET['offset']:0; $LinesToDisplay = 12; $row = $offset + $LinesToDisplay; $row2 = $offset - $LinesToDisplay; $file_handle = fopen("web.txt", "rb"); error_reporting( E_ALL ); // DEBUGGING $SelectArray=array(); while ((($parts = fgetcsv($file_handle,4096,"|")) !== FALSE) && ($LinesToDisplay > 0) && (!feof($file_handle))) { //new code //skip first $offset lines $num = count($parts[6]); $SelectArray[]=$parts[6]; if ($parts[5] == 9999) { if ($offset-- > 0) {continue;} $parts[0] = ucwords(strtolower($parts[0])); $parts[1] = ucwords(strtolower($parts[1])); ?> <td> <?php echo "<table BACKGROUND='background.jpg' border=0 width=250><td width='243' height='105'>"; echo "<font size=-1 face='helvetica' color=#812990><b>$parts[0]</b></font>"; echo "<i>"; ?> <html> <div onMouseOver="this.style.color = 'black';" onMouseOut="this.style.color = '#D5DF23';"> </html><?php echo "<font size=2>-$parts[1]</font>"; echo "</div></i>"; ?><html><a href="#" title="Koop nu de <?php echo $parts[0]; ?>" onClick="window.open('form.php?p=<?php echo urlencode($parts[0]); ?>','popuppage','width=400,height=400,top=250,left=250,resizable=0,statusbar=0,titlebar=yes,toolbar=no,scrollbars=no,location=no,directories=no');"> <div><img src='ster.jpg' border=0 width='46' align='right'></a> <a href="#"><img src='envelope.jpg' border=0 width='46' align='right'title="Heeft u een vraag over <?php echo $parts[0]; ?>" onClick="window.open('vraag.php?p=<?php echo urlencode($parts[0]); ?>','popuppage','width=400,height=400,top=250,left=250,resizable=0,statusbar=0,titlebar=yes,toolbar=no,scrollbars=no,location=no,directories=no');"> <div></a> <TABLE BORDER='0' cellpadding='0' CELLSPACING='0'> <TR> <TD WIDTH='70' HEIGHT='20' BACKGROUND='pricebackground.jpg' VALIGN='bottom'> <center> <font size=2 color=white face='helvetica'> <b></html> <?php echo "€ $parts[2]"; ?> </b> </td> </tr> </table> <?php echo "<b><font size=3 color=#D7182A>Op Voorraad In:<br></font>"; echo ("<font color=black> Amsterdam </font>"); if ( $parts[3] >= 1 ) echo ("<IMG SRC =green.gif>").""; if ( $parts[3] <= 0 ) echo ("<IMG SRC =red.gif>").""; echo ("<font color=black> Utrecht </font>"); if ( $parts[4] >= 1 ) echo ("<IMG SRC =green.gif>")."</td></table></b><p style='margin:9px;'>"; if ( $parts[4] <= 0 ) echo ("<IMG SRC =red.gif>")."</td></table></b><p style='margin:9px;'>"; $LinesToDisplay--; if ($LinesToDisplay/3==intval($LinesToDisplay/3)) { echo "<tr><td>"; } }} fclose($file_handle); ?> <tr align=right> <select style="background-color: #FFFFFF; color: #000000; font-family: Arial; font-weight: none; font-size: 12; width: 150px; "> <?php $i=1; foreach ($SelectArray as $val){ echo "<option value=\"$i\">$val</option>\n"; $i++; } ?> </select> <font color=black><body alink=black vlink=black link=black text=black> <center><a href="occasiona.php?offset=<?php echo $row2; ?>" align=center>&laquo; previous</a> || <a href="occasiona.php?offset=<?php echo $row; ?>">next &raquo;</a></table></html>

    Read the article

  • jQuery carousel clicks update <select> list's "selected" option to match clicked item's title attrib

    - by Scott B
    The code below allows me to change a preview image outside the carousel widget so that it matches the element under the mouse. For example, if the user mouses over image2's thumbnail, the script updates .selectedImage so that it displays image2's full size version. I'd like to enhance it so that the #myThumbs options listing updates its "selected" option to match the carousel image that receives a click. Mouseover changes the preview image and click changes the select list to match the same name. The items in the carousel will have the same title attribute as the items in the select list, so I would expect that I can pass that value from the carousel to the select list. $(function() { $("#carousel").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", visible: 6, mouseWheel: true, speed: 700 }); $('#carousel').show(); $('#carousel ul li').hover(function(e) { var img_src = $(this).children('img').attr('src'); $('.selectedImage img').attr('src',img_src); } ,function() { $('.selectedImage img').attr('src', '<?php echo $selectedThumb; ?>');}); }); <select id="myThumbs"> <option>image1</option> <option selected="selected">image2</option> <option>image3</option> </select>

    Read the article

  • Twitter bootstrap modal loads wrong remote data

    - by Victor S
    I'm using Twitter Bootstrap modal featurs and loading data from remote locations. I'm providing the remote url for a set of thumbnails with the hope that once the thumbnail is clicked, the appropriate data (a large version of the image) is displayed. I'm using the html declarative style to define the remote urls and all the features of the modal. What I find is that Twitter bootstrap modal loads first remote url then does not display subsequent remote data, (although a request to the proper url is made in Chrome) but displays first loaded data always. How do I get it to show the proper data? View: #gallery-navigation %ul - @profile.background_images.each do |image| %li = link_to image_tag(image.background_image.url(:thumb)), remote_image_path(image.id), :role => "button", :data => {:toggle => "modal", :target => "#image-modal", :remote => remote_image_path(image.id)}, :id => "image-modal" / Modal #image-modal.modal.hide.fade(role="dialog" aria-hidden="true" data-backdrop="true") .modal-body Controller: def remote_image @image = current_user.profile.background_images.find(params[:image_id]) respond_to do |format| format.html { render :partial => "remote_image", :locals => { :image => @image } } end end

    Read the article

< Previous Page | 108 109 110 111 112 113 114 115 116 117 118  | Next Page >