Search Results

Search found 17407 results on 697 pages for 'jquery wysiwyg'.

Page 445/697 | < Previous Page | 441 442 443 444 445 446 447 448 449 450 451 452  | Next Page >

  • Need help with setting up comet code

    - by Saif Bechan
    Does anyone know off a way or maybe think its possible to connect Node.js with Nginx http push module to maintain a persistent connection between client and browser. I am new to comet so just don't understand the publishing etc maybe someone can help me with this. What i have set up so far is the following. I downloaded the jQuery.comet plugin and set up the following basic code: Client JavaScript <script type="text/javascript"> function updateFeed(data) { $('#time').text(data); } function catchAll(data, type) { console.log(data); console.log(type); } $.comet.connect('/broadcast/sub?channel=getIt'); $.comet.bind(updateFeed, 'feed'); $.comet.bind(catchAll); $('#kill-button').click(function() { $.comet.unbind(updateFeed, 'feed'); }); </script> What I can understand from this is that the client will keep on listening to the url followed by /broadcast/sub=getIt. When there is a message it will fire updateFeed. Pretty basic and understandable IMO. Nginx http push module config default_type application/octet-stream; sendfile on; keepalive_timeout 65; push_authorized_channels_only off; server { listen 80; location /broadcast { location = /broadcast/sub { set $push_channel_id $arg_channel; push_subscriber; push_subscriber_concurrency broadcast; push_channel_group broadcast; } location = /broadcast/pub { set $push_channel_id $arg_channel; push_publisher; push_min_message_buffer_length 5; push_max_message_buffer_length 20; push_message_timeout 5s; push_channel_group broadcast; } } } Ok now this tells nginx to listen at port 80 for any calls to /broadcast/sub and it will give back any responses sent to /broadcast/pub. Pretty basic also. This part is not so hard to understand, and is well documented over the internet. Most of the time there is a ruby or a php file behind this that does the broadcasting. My idea is to have node.js broadcasting /broadcast/pub. I think this will let me have persistent streaming data from the server to the client without breaking the connection. I tried the long-polling approach with looping the request but I think this will be more efficient. Or is this not going to work. Node.js file Now to create the Node.js i'm lost. First off all I don't know how to have node.js to work in this way. The setup I used for long polling is as follows: var sys = require('sys'), http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); res.write(new Date()); res.close(); seTimeout('',1000); }).listen(8000); This listens to port 8000 and just writes on the response variable. For long polling my nginx.config looked something like this: server { listen 80; server_name _; location / { proxy_pass http://mydomain.com:8080$request_uri; include /etc/nginx/proxy.conf; } } This just redirected the port 80 to 8000 and this worked fine. Does anyone have an idea on how to have Node.js act in a way Comet understands it. Would be really nice and you will help me out a lot. Recources used An example where this is done with ruby instead of Node.js jQuery.comet Nginx HTTP push module homepage Faye: a Comet client and server for Node.js and Rack To use faye I have to install the comet client, but I want to use the one supplied with Nginx. Thats why I don't just use faye. The one nginx uses is much more optimzed. extra Persistant connections Going evented with Node.js

    Read the article

  • Fade Out an <ul> and Fade In Info From DB

    - by NessDan
    On my portfolio page I have this setup: <div id="portfolio"> <ul id="sites"> <li> <h3><a href="#">MotorSomethin</a></h3> <img src="http://dummyimage.com/265x100/000/fff" /> <p> We tried going for a very dark but flashy look for this website. Hence the reason we used flash. </p> </li> <li> <h3><a href="#">MotorSomethin</a></h3> <img src="http://dummyimage.com/265x100/000/fff" /> <p> We tried going for a very dark but flashy look for this website. Hence the reason we used flash. </p> </li> <li> <h3><a href="#">MotorSomethin</a></h3> <img src="http://dummyimage.com/265x100/000/fff" /> <p> We tried going for a very dark but flashy look for this website. Hence the reason we used flash. </p> </li> <li> <h3><a href="#">MotorSomethin</a></h3> <img src="http://dummyimage.com/265x100/000/fff" /> <p> We tried going for a very dark but flashy look for this website. Hence the reason we used flash. </p> </li> <li> <h3><a href="#">MotorSomethin</a></h3> <img src="http://dummyimage.com/265x100/000/fff" /> <p> We tried going for a very dark but flashy look for this website. Hence the reason we used flash. </p> </li> </ul> </div> So imagine a grid, 2 sites per line. I want to use jQuery so that when I click the H3, the image, or the paragraph inside the LIE(which are all information about a certain site), it would fade out the entire UL, then grab info about that site from our database. I think this requires AJAX but I don't have much experience with it. I'm also confused on how to use jQuery to write the new HTML after the information is grabbed.

    Read the article

  • Extending XHTML

    - by Daniel Schaffer
    I'm playing around with writing a jQuery plugin that uses an attribute to define form validation behavior (yes, I'm aware there's already a validation plugin; this is as much a learning exercise as something I'll be using). Ideally, I'd like to have something like this: Example 1 - input: <input id="name" type="text" v:onvalidate="return this.value.length > 0;" /> Example 2 - wrapper: <div v:onvalidate="return $(this).find('[value]').length > 0;"> <input id="field1" type="text" /> <input id="field2" type="text" /> <input id="field3" type="text" /> </div> Example 3 - predefined: <input id="name" type="text" v:validation="not empty" /> The goal here is to allow my jQuery code to figure out which elements need to be validated (this is already done) and still have the markup be valid XHTML, which is what I'm having a problem with. I'm fairly sure this will require a combination of both DTD and XML Schema, but I'm not really quite sure how exactly to execute. Based on this article, I've created the following DTD: <!ENTITY % XHTML1-formvalidation1 PUBLIC "-//W3C//DTD XHTML 1.1 +FormValidation 1.0//EN" "http://new.dandoes.net/DTD/FormValidation1.dtd" > %XHTML1-formvalidation1; <!ENTITY % Inlspecial.extra "%div.qname; " > <!ENTITY % xhmtl-model.mod SYSTEM "formvalidation-model-1.mod" > <!ENTITY % xhtml11.dtd PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > %xhtml11.dtd; And here is "formvalidation-model-1": <!ATTLIST %div.qname; %onvalidation CDATA #IMPLIED %XHTML1-formvalidation1.xmlns.extra.attrib; > I've never done DTD before, so I'm not even really exactly sure what I'm doing. When I run my page through the W3 XHTML validator, I get 80+ errors because it's getting duplicate definitions of all the XHTML elements. Am I at least on the right track? Any suggestions? EDIT: I removed this section from my custom DTD, because it turned out that it was actually self-referencing, and the code I got the template from was really for combining two DTDs into one, not appending specific items to one: <!ENTITY % XHTML1-formvalidation1 PUBLIC "-//W3C//DTD XHTML 1.1 +FormValidation 1.0//EN" "http://new.dandoes.net/DTD/FormValidation1.dtd" > %XHTML1-formvalidation1; I also removed this, because it wasn't validating, and didn't seem to be doing anything: <!ENTITY % Inlspecial.extra "%div.qname; " > Additionally, I decided that since I'm only adding a handful of additional items, the separate files model recommended by W3 doesn't really seem that helpful, so I've put everything into the dtd file, the content of which is now this: <!ATTLIST div onvalidate CDATA #IMPLIED> <!ENTITY % xhtml11.dtd PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > %xhtml11.dtd; So now, I'm not getting any DTD-related validation errors, but the onvalidate attribute still is not valid. Update: I've ditched the DTD and added a schema: http://schema.dandoes.net/FormValidation/1.0.xsd Using v:onvalidate appears to validate in Visual Studio, but the W3C service still doesn't like it. Here's a page where I'm using it so you can look at the source: http://new.dandoes.net/auth And here's the link to the w3c validation result: http://validator.w3.org/check?uri=http://new.dandoes.net/auth&charset=(detect+automatically)&doctype=Inline&group=0 Is this about as close as I'll be able to get with this, or am I still doing something wrong?

    Read the article

  • $.noConflict() not working with mootools slide show. Need help !

    - by Shantanu Gupta
    I am working on a site http://tapasya.co.in where i just impemented mootools slideshow. But I noticed that menubar that i was using stopped working, it was supposed to drop horizontaly but it is not being displayed now. I have used jquery for it. Please see the source of the web page. What can be the problem ? Mootools conflicting with javascript or some other problem. If I tries to use $.noConflict() it throws me an error in script Uncaught TypeError: Object function (B,C){if(B&&B.$family&&B.uid){return B}var A=$type(B);return($[A])?$[A](B,C,this.document):null} has no method 'noConflict' I tried the given solution below. But it is not working. <script type="text/javascript" src="<%= ResolveUrl("~/Js/jquery-1.3.2.min.js") %>" ></script> <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/mootools.js") %>"></script> <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/slideshow.js") %>"></script> <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/SlideShow/js/lightbox.js") %>"></script> <script type="text/javascript"> // <![CDATA[ $.noConflict(); var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function ddmenu_open(){ ddmenu_canceltimer(); ddmenu_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible'); } function ddmenu_close(){ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); } function ddmenu_timer(){ closetimer = window.setTimeout(ddmenu_close, timeout); } function ddmenu_canceltimer(){ if(closetimer){ window.clearTimeout(closetimer); closetimer = null; }} $(document).ready(function(){ $('#ddmenu > li').bind('mouseover', ddmenu_open) $('#ddmenu > li').bind('mouseout', ddmenu_timer) }); document.onclick = ddmenu_close; // ]]> </script> <script type="text/javascript"> //<![CDATA[ window.addEvent('domready', function(){ var data = { '1.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, '2.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, '3.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' }, '4.jpg': { caption: 'Acoustic Guitar,electric,bass,keyboard, indian vocal traning and Music theory.' } }; // Note the use of "linked: true" which tells Slideshow to auto-link all slides to the full-size image. //http://code.google.com/p/slideshow/wiki/Slideshow#Options: var mootoolsSlideshow = new Slideshow('divbanner', data, {loader:true,captions: true, delay: 5000,controller: false, height: 370,linked: false, hu: '<%= ResolveUrl("~/Scripts/SlideShow/Images/") %>', thumbnails: true, width: 1002}); // Here we create the Lightbox instance. // In this case we will use the "close" and "open" callbacks to pause our show while the modal window is visible. var box = new Lightbox({ 'onClose': function(){ this.pause(false); }.bind(mootoolsSlideshow), 'onOpen': function(){ this.pause(true); }.bind(mootoolsSlideshow) }); }); //]]> </script>

    Read the article

  • twitter bootstrap collapsable nav menu

    - by clifgray
    I am using twitter bootstrap on my web app to do all of the styling and everything is great for the most part. The problem is that my nav bar, once collapsed, will not drop down when I click the dropdown icon. I have listed my HTML but I think the problem is with my javascript seeing as this fiddle with the exact same code: http://jsfiddle.net/YWUmb/30/ works just fine. <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="/">Exployre</a> <div class="nav-collapse"> <ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/profile">Profile</a></li> <li><a href="/sponsors">Sponsors</a></li> <li><a href="/working">Exployrers</a></li> <li><a href="/about">About</a></li> <li><a href="/share">Share</a></li> <li> {% if user %} User: {{ user }}<br> <a href="{{ logout }}">Logout</a> {% else %} <a href="/login">Signin or Register</a> {% endif %} <li> <a href="/profile"> {% if visits %} {% if visits > 10 %} Prestige: {{ visits }} {% elif visits > 5 %} {% endif %} {% endif %} </a> </li> <li> <form action="/search" class="navbar-search"> <div> <input type="text" placeholder="Search" class="search-query" name="q" size="55"/> </div> </form> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script> </li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <script type="text/javascript" src="/static/js/bootstrap.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> Is there anything wrong with my source code links or anything additional that I need to do to make it work?

    Read the article

  • how to make google-maps info window editable ..

    - by zjm1126
    i want to do this : the info window can be editable when i click the info window. this is my code: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes"> </head> <body onload="initialize()" onunload="GUnload()"> <style type="text/css"> *{ margin:0; padding:0; } </style> <!--<div style="width:100px;height:100px;background:blue;"> </div>--> <div id="map_canvas" style="width: 500px; height: 300px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script> <script type="text/javascript"> var aFn; //********** function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); var center=new GLatLng(39.9493, 116.3975); map.setCenter(center, 13); aFn=function(x,y){ var point =new GPoint(x,y) point = map.fromContainerPixelToLatLng(point); //console.log(point.x+" "+point.y) var marker = new GMarker(point,{draggable:true}); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<b>wwww</b>"); }); map.addOverlay(marker); /********** var marker = new GMarker(point, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml("????..."); }); map.addOverlay(marker); //*/ } $(".b").draggable({ revert: true, revertDuration: 0 }); $("#map_canvas").droppable({ drop: function(event,ui) { //console.log(ui.offset.left+' '+ui.offset.top) aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top); } }); } } </script> </body> </html>

    Read the article

  • Internet Explorer ajax request not returning anything

    - by Ryan Giglio
    At the end of my registration process you get to a payment screen where you can enter a coupon code, and there is an AJAX call which fetches the coupon from the database and returns it to the page so it can be applied to your total before it is submitted to paypal. It works great in Firefox, Chrome, and Safari, but in Internet Explorer, nothing happens. The (data) being returned to the jQuery function appears to be null. jQuery Post function applyPromo() { var enteredCode = $("#promoCode").val(); $(".promoDiscountContainer").css("display", "block"); $(".promoDiscount").html("<img src='/images/loading.gif' alt='Loading...' title='Loading...' height='18' width='18' />"); $.post("/ajax/lookup-promo.php", { promoCode : enteredCode }, function(data){ if ( data != "error" ) { var promoType = data.getElementsByTagName('promoType').item(0).childNodes.item(0).data; var promoAmount = data.getElementsByTagName('promoAmount').item(0).childNodes.item(0).data; $(".promoDiscountContainer").css("display", "block"); $(".totalWithPromoContainer").css("display", "block"); if (promoType == "percent") { $("#promoDiscount").html("-" + promoAmount + "%"); var newPrice = (originalPrice - (originalPrice * (promoAmount / 100))); $("#totalWithPromo").html(" $" + newPrice); if ( promoAmount == 100 ) { skipPayment(); } } else { $("#promoDiscount").html("-$" + promoAmount); var newPrice = originalPrice - promoAmount; $("#totalWithPromo").html(" $" + newPrice); } $("#paypalPrice").val(newPrice + ".00"); $("#promoConfirm").css("display", "none"); $("#promoConfirm").html("Promotion Found"); finalPrice = newPrice; } else { $(".promoDiscountContainer").css("display", "none"); $(".totalWithPromoContainer").css("display", "none"); $("#promoDiscount").html(""); $("#totalWithPromo").html(""); $("#paypalPrice").val(originalPrice + ".00"); $("#promoConfirm").css("display", "block"); $("#promoConfirm").html("Promotion Not Found"); finalPrice = originalPrice; } }, "xml"); } Corresponding PHP Page include '../includes/dbConn.php'; $enteredCode = $_POST['promoCode']; $result = mysql_query( "SELECT * FROM promotion WHERE promo_code = '" . $enteredCode . "' LIMIT 1"); $currPromo = mysql_fetch_array( $result ); if ( $currPromo ) { if ( $currPromo['percent_off'] != "" ) { header("content-type:application/xml;charset=utf-8"); echo "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>"; echo "<promo>"; echo "<promoType>percent</promoType>"; echo "<promoAmount>" . $currPromo['percent_off'] . "</promoAmount>"; echo "</promo>"; } else if ( $currPromo['fixed_off'] != "") { header("content-type:application/xml;charset=utf-8"); echo "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>"; echo "<promo>"; echo "<promoType>fixed</promoType>"; echo "<promoAmount>" . $currPromo['fixed_off'] . "</promoAmount>"; echo "</promo>"; } } else { echo "error"; } When I run the code in IE, I get a javascript error on the Javascript line that says var promoType = data.getElementsByTagName('promoType').item(0).childNodes.item(0).data; Here's a screenshot of the IE debugger

    Read the article

  • wave.getState() returns null

    - by RMorrisey
    When trying to call wave.getState() in my Google Wave gadget, I get back null (no state object). How can I initialize the Wave state object? I am working in the Wave Sandbox. My ModulePrefs contains the following: <Require feature="wave" /> <Require feature="rpc"/> I got the "rpc" feature from some google groups post when searching for a fix, but it doesn't seem to be any help. The gadget contains a jQuery plugin, which defines the classes I use (not shown), attaches an event handler to the link that shows up in edit mode, and sets up the callback methods with the google wave gadget initializer: $.fn.extend({ $.gork.InitPass.newButtonClick = function newButtonClick() { var jer = new $.gork.InitPass.Player('Jeremias', 12, 2); var delta = {}; delta[jer.name] = jer.serialize(); wave.getState().submitDelta(delta); }; $.gork.InitPass.modeCallback = function modeCallback() { var state = wave.getState(); var mode = wave.getMode(); $.gork.InitPass.getContainer().ipCombatState(state, (mode == wave.Mode.EDIT)); }; $.gork.InitPass.stateCallback = function stateCallback() { $.gork.InitPass.getContainer().ipCombatState( wave.getState(), (wave.getMode() == wave.Mode.EDIT)); alert('state'); }; $.gork.InitPass.init = function init() { if (wave && wave.isInWaveContainer()) { var mode = wave.getMode(); $('.gork-ip-container').ipCombatState(null, (mode == wave.Mode.EDIT)); wave.setModeCallback($.gork.InitPass.modeCallback); wave.setStateCallback($.gork.InitPass.stateCallback); } }; })(jQuery); gadgets.util.registerOnLoadHandler($.gork.InitPass.init); $(function ready() { $.gork.InitPass.getContainer().find('.gork-ip-edit .addSection a.newButton').click( $.gork.InitPass.newButtonClick); }); So there are two main pieces of functionality here: When the mode changes, ipCombatState(...) is called. This changes the visual appearance of the gadget when the user puts the gadget in Edit mode (CTRL+E), by hiding the view DIV and displaying the edit DIV. The newButtonClick callback (which is attached to the link "a.newButton" in the edit container) is supposed to add Jeremias (Nate's Shadowrun character) to the gadget state, so that he'll be appear as a table row in edit mode. I have verified that the initializer method is called, and the view/edit mode switch works just fine (except the state is null). When I click on the new button link (the link at the bottom in edit mode), and trigger the newButtonClick handler, I get an error because wave.getState() also returns null. How can I initialize the wave state so that I can work with it? The purpose of my gadget will be to keep track of combat initiative order in a Shadowrun tabletop game (4th Ed). You can test it out in Wave and see what I have so far: http://gorkwobble.herobo.com/wave/init-pass.xml The actual javascript code is externalized to: http://gorkwobble.herobo.com/wave/init-pass.js P.S. If any Shadowrun players read this, and want to hear about it when I get the gadget working, leave a comment and I'll wave you.

    Read the article

  • validate() > show field after radiobutton selection

    - by RihanU
    hi im saw this jquery script: http://jquery.bassistance.de/validate/demo/ and i want also the posibility to show a field when a button is checked but not with a checkbox. but with two radiobuttons. if radiobutton1 is checked, display field1 and if radiobutton2 is checked display field 2 what do i have to change..? <script type="text/javascript"> $().ready(function() { //code to hide topic selection, disable for demo var foo = $("#foo"); // foo topics are optional, hide first var inital = foo.is(":checked"); var topics = $("#blaat")[inital ? "removeClass" : "addClass"]("gray"); var topicInputs = topics.find("input").attr("disabled", !inital); // show when foo is checked foo.click(function() { topics[this.checked ? "removeClass" : "addClass"]("gray"); topicInputs.attr("disabled", !this.checked); }); }); </script> <form class="cmxform" id="signupForm" method="get" action=""> <fieldset> <p> <label for="foo">De checkbox dus veranderen naar 2 radio buttons</label> <input type="checkbox" class="checkbox" id="foo" name="foo" /> <!-- <input type="radio" value="ding" class="checkbox" id="foo" name="foo" /> <input type="radio" value="dong" class="checkbox" id="foo" name="foo" /> --> </p> <!-- Fieldset 1 --> <fieldset id="blaat"> <label for="topic_marketflash"> <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> Marketflash </label> <label for="topic_fuzz"> <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> Latest fuzz </label> <label for="topic_digester"> <input type="checkbox" id="topic_digester" value="digester" name="topic" /> Mailing list digester </label> </fieldset> <!-- --> <!-- Fieldset 2 --> <fieldset id="andere"> <label for="topic_marketflash"> <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> Voor </label> <label for="topic_fuzz"> <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> Beelden </label> </fieldset> <!-- --> </fieldset> </form>

    Read the article

  • How to get dropdown menu to open/close on click rather than hover?

    - by TankDriver
    Hello! I am very new to java and ajax/jquery and have been working on trying to get a script to open and close the drop menu on click rather that hover. The menu in question is found on http://www.gamefriction.com/Coded/ and is the dark menu on the right side under the header. I would like it to open and close like the other menu that is further below it (it is light gray and is in the "Select Division" module). The gray menu is part of a menu and the language menu is not. I have a jquery import as well which can be found in the view source of the above link. My Java: <script type="text/javascript"> /* Language Selector */ $(function() { $("#lang-selector li").hover(function() { $('ul:first',this).css('display', 'block'); }, function() { $('ul:first',this).css('display', 'none'); }); }); $(document).ready(function(){ /* Navigation */ $('.subnav-game').hide(); $('.subnav-game:eq(0)').show(); $('.preorder-type').hide(); $('.preorder-type:eq(3)').show(); }); </script> My CSS: #lang-selector { font-size: 11px; height: 21px; margin: 7px auto 17px auto; width: 186px; } #lang-selector span { color: #999; float: left; margin: 4px 0 0 87px; padding-right: 4px; text-align: right; } #lang-selector ul { float: left; list-style: none; margin: 0; padding: 0; } #lang-selector ul li a { padding: 3px 10px 1px 10px; } #lang-selector ul, #lang-selector a { width: 186px; } #lang-selector ul ul { display: none; position: absolute; } #lang-selector ul ul li { border-top: 1px solid #666; float: left; position: relative; } #lang-selector a { background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat; color: #666; display: block; font-size: 10px; height: 17px; padding: 4px 10px 0 10px; text-align: left; text-decoration: none; width: 166px; } #lang-selector ul ul li a { background: #333; color: #999; } #lang-selector ul ul li a:hover { background: #c4262c; color: #fff; } My HTML: <div id="lang-selector"> <ul> <li> <a href="#">Choose a Language</a> <ul> <li><a href="?iw_lang=en">English</a></li> <li><a href="?iw_lang=de">Deutsch</a></li> <li><a href="?iw_lang=es">Espa&ntilde;ol</a></li> <li><a href="?iw_lang=fr">Fran&ccedil;ais</a></li> <li><a href="?iw_lang=it">Italiano</a></li> </ul> </li> </ul> </div> Thanks!

    Read the article

  • Hide element if displayed (a little complex case)

    - by Ricardo
    Hello, I have a list of radio buttons that are inside a DIV called "radio-btns-wrapper-wjs", this DIV slides down/up when you click on a 'trigger' element, in my case a < span with the class "selected-search-wjs". The DIV "radio-btns-wrapper-wjs" slides back up when the user selects one of the radio buttons. This DIV also slides back up when the user does not take any action (does not select a radio button) but has already moved his mouse over "radio-btns-wrapper-wjs" DIV and then moves it out. So far, so good. What I need is to have the same DIV, "radio-btns-wrapper-wjs", slide back up when the user moves his mouse out from the < span "selected-search-wjs" element but NOT if the user moves his mouse over the DIV "radio-btns-wrapper-wjs". The thing is that is that if do this: $('.selected-search-wjs').mouseleave(function() { $('.radio-btns-wrapper-wjs').slideUp(); }); The DIV with the radio buttons, "radio-btns-wrapper-wjs", slides back up as soon as I leave that DIV to select a radio button. I need a condition that says something like: "Hide the DIV "radio-btns-wrapper-wjs" if the user hovers over you and then hovers out. Also, hide this same DIV if the user moves his mouse away from the < span "selected-search-wjs", but NOT if he moves his mouse over the DIV "radio-btns-wrapper-wjs"." Does all this make sense? Here's my HTML: <div class="radio-btns-wjs"><span class="selected-search-wjs">&nbsp;</span> <div class="radio-btns-wrapper-wjs"> <label> <input type="radio" name="rb" value="all" id="all"> All</label> <label> <input type="radio" name="rb" value="ln" id="ln"> Option 1</label> <label> <input type="radio" name="rb" value="prodsandserv" id="prodsandserv"> Option 2</label> <label> <input type="radio" name="rb" value="publications" id="publications"> Option 3</label> <label> <input type="radio" name="rb" value="comm" id="comm"> Option 4</label> <label> <input type="radio" name="rb" value="lweb" id="lweb"> Option 5</label> </div> </div> My jQuery: //This slides up/down the DIV with the radio buttons $('.selected-search').addClass('selected-search-wjs').removeClass('selected-search').append('Please Select&hellip;').click(function() { $('.radio-btns-wrapper-wjs').slideToggle('fast'); }); //This hides the DIV with the radio buttons, if the user has hovered over it $('.radio-btns-wrapper-wjs').mouseleave(function() { $(this).slideUp(); }); As you can see I'm very new to jQuery, but this is way over my head now. Any help is greatly appreciated. Here's a live example: http://jsfiddle.net/t2HkQ/3/ Thanks.

    Read the article

  • Mouseover triggered on absolute positioned div

    - by Tauren
    Objective Have a small magnifying glass icon that appears in the top right corner of a table cell when the table cell is hovered over. Mousing over the magnifying glass icon and clicking it will open a dialog window to show detailed information about the item in that particular table cell. I want to reuse the same icon for hundreds of table cells without recreating it each time. Partial Solution Have a single <span> that is absolutely positioned and hidden. When a _previewable table cell is hovered, the <span> is moved to the correct location and shown. This <span> is also moved in the DOM to be a child of the _previewable table cell. This enables a click handler attached to the <span> to find the _previewable parent, and get information from it's jquery data() object that is used to populate the contents of the dialog. Here is a very simplified version of my HTML: <body> <span id="options"> <a class="ui-state-default ui-corner-all"> <span class="ui-icon ui-icon-search"></span> Preview </a> </span> <table> <tr> <td class="_previewable"> <img scr="user_1.png"/> <span>Bob Smith</span> </td> </tr> </table> </body> And this CSS: #options { position: absolute; display: none; } With this jQuery code: var $options = $('#options'); $options.click(function() { $item = $(this).parents("._previewable"); // Show popup based on data in $item.data("id"); Layout.renderPopup($item.data("id"),$item.data("popup")); }); $('._previewable').live('mouseover mouseout',function(event) { if (event.type == 'mouseover') { var $target = $(this); var $parent = $target.offsetParent()[0]; var left = $parent.scrollLeft + $target.position().left + $target.outerWidth() - $options.outerWidth() + 1; var top = $parent.scrollTop + $target.position().top + 2; $options.appendTo($target); $options.css({ "left": left + "px", "top": top + "px" }).show(); } else { // On mouseout, $options continues to be a child of $(this) $options.hide(); } }); Problem This solution works perfectly until the contents of my table are reloaded or changed via AJAX. Because the <span> was moved from the <body> to be a child of the cell, it gets thrown out and replaced during the AJAX call. So my first thought is to move the <span> back to the body on mouseout of the table cell, like this: else { // On mouseout, $options is moved back to be a child of body $options.appendTo("body"); $options.hide(); } However, with this, the <span> disappears as soon as it is mouseover. The mouseout event seems to be called on _previewable when the mouse moves into the <span>, even though the <span> is a child of _previewable and fully displayed within the boundaries of the _previewable table cell. At this point, I've only tested this in Chrome. Questions Why would mouseout be called on _previewable, when the mouse is still within the boundaries of _previewable? Is it because the <span> is absolutely positioned? How can I make this work, without recreating the <span> and it's click handler on each AJAX table referesh?

    Read the article

  • How to make sql query dynamic?

    - by ClarkSKent
    Hello, I am using this pagination class and was looking for a way to make the sql query more dynamic instead of having it hardcoded. I have a 3 <li> elements that I want to be filter buttons, meaning when a user clicks on one of these elements I want It to send the id so I can use it in a sql query. So for the $sql = "select * from explore where category='marketing'"; (as seen below). When the user clicks on the 'automotive' button it will change the category above to automotive. Any help on this would be highly appreciated, Thanks. This is what my main page looks like: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="jquery_page.js"></script> <?php //Include the PS_Pagination class include('ps_pagination.php'); //Connect to mysql db $conn = mysql_connect('localhost', 'root', 'root'); mysql_select_db('ajax_demo',$conn); $sql = "select * from explore where category='marketing'"; //Create a PS_Pagination object $pager = new PS_Pagination($conn, $sql, 3, 11, 'param1=valu1&param2=value2'); //The paginate() function returns a mysql //result set for the current page $rs = $pager->paginate(); //Loop through the result set while($row = mysql_fetch_assoc($rs)) { echo "<table width='800px'>"; echo "<tr>"; echo"<td>"; echo $row['id']; echo"</td>"; echo"<td>"; echo $row['site_description']; echo"</td>"; echo"<td>"; echo $row['site_price']; echo"</td>"; echo "</tr>"; echo "</table>"; } echo "<ul id='pagination'>"; echo "<li>"; //Display the navigation echo $pager->renderFullNav(); echo "</li>"; echo "</ul>"; echo "<ul id='filter'>"; echo "<li id='marketing'>"; echo "Marketing"; echo "</li>"; echo "<li id='automotive'>"; echo "Automotive"; echo "</li>"; echo "<li id='sports'>"; echo "Sports"; echo "</li>"; echo "</ul>"; ?>

    Read the article

  • Var null and not an object when using document.getElementById

    - by Dean
    Hi, I'm doing some work in HTML and JQuery. I have a problem of my textarea and submit button not appearing after the radio button is selected. My HTML looks like this: <html> <head><title>Publications Database | Which spotlight for Publications</title> <script type="text/javascript" src="./jquery.js"></script> <script src="./addSpotlight.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="wrapper"> <div class="header"> <div class="headerText">Which spotlight for Publications</div> </div> <div class="mainContent"> <p>Please select the publication that you would like to make the spotlight of this month:</p> <form action="addSpotlight" method="POST" id="form" name="form"> <div class="div29" id="div29"><input type="radio" value="29" name="publicationIDs" >A System For Dynamic Server Allocation in Application Server Clusters, IEEE International Symposium on Parallel and Distributed Processsing with Applications, 2008 </div> <div class="div30" id="div30"><input type="radio" value="30" name="publicationIDs" >Analysing BitTorrent's Seeding Strategies, 7th IEEE/IFIP International Conference on Embedded and Ubiquitous Computing (EUC-09), 2009 </div> <div class="div31" id="div31"><input type="radio" value="31" name="publicationIDs" >The Effect of Server Reallocation Time in Dynamic Resource Allocation, UK Performance Engineering Workshop 2009, 2009 </div> <div class="div32" id="div32"><input type="radio" value="32" name="publicationIDs" >idk, hello, 1992 </div> <div class="div33" id="div33"><input type="radio" value="33" name="publicationIDs" >sad, safg, 1992 </div> <div class="abstractWriteup" id="abstractWriteup"><textarea name="abstract"></textarea> <input type="submit" value="Add Spotlight"></div> </form> </div> </div> </body> </html> My javascript looks like this: $(document).ready( function() { $('.abstractWriteup').hide(); addAbstract(); }); function addAbstract() { var abstractWU = document.getElementById('.abstractWriteup'); $("input[name='publicationIDs']").change(function() { var abstractWU = document.getElementById('.abstractWriteup'); var classNameOfSelected = $("input[name='publicationIDs']").val(); var radioSelected = document.getElementById("div"+classNameOfSelected); var parentDiv = radioSelected.parentNode; parentDiv.insertBefore(radioSelected, abstractWU.nextSibling); $('.abstractWriteup').show(); });}; I have developed this by using Node#insertBefore. When I have had it working it has been rearranging the radio buttons. Thanks in Advance Dean

    Read the article

  • How get <body> element from the html which one have as a string

    - by Oleg
    Hello! I have a stupid problem. An jQuery.ajax request return me a full HTML text as a string. I receive such response in an case of error on the server. The server give me an error description which I want to place inside of the corresponding place of my current page. So now the question: I have a string contains full HTML document (which is not an XML!!! see <hr> element inside). I need to have for example only BODY part as a jQuery object. Then I could append it to the corresponding part of my page. Here is an example of the string which I need to parse: <html> <head> <title>The resource cannot be found.</title> <style> body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;} p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px} // ... </style> </head> <body bgcolor="white"> <span><H1>Server Error in '/' Application.<hr width=100% size=1 color=silver></H1> <h2> <i>The resource cannot be found.</i> </h2></span> <font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif "> <b> Description: </b>HTTP 404. The resource you are looking for ...bla bla.... <br><br> <b> Requested URL: </b>/ImportBPImagesInfos/Repository.svc/GetFullProfilimageSw<br><br> <hr width=100% size=1 color=silver> <b>Version Information:</b>&nbsp;Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.1 </font> </body> </html> <!-- [HttpException]: A public action method &#39;.... at System.Web.Mvc.Controller.HandleUnknownAction(String actionName) at System.Web.Mvc.Controller.ExecuteCore() at System.Web.Mvc.ControllerBase.Execute(RequestContext requestContext) at System.Web.Mvc.ControllerBase.System.Web.Mvc.IController.Execute(RequestContext requestContext) at System.Web.Mvc.MvcHandler.<>c__DisplayClass8.<BeginProcessRequest>b__4() at System.Web.Mvc.Async.AsyncResultWrapper.<>c__DisplayClass1.<MakeVoidDelegate>b__0() at System.Web.Mvc.Async.AsyncResultWrapper.<>c__DisplayClass8`1.<BeginSynchronous>b__7(IAsyncResult _) at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult`1.End() at System.Web.Mvc.Async.AsyncResultWrapper.End[TResult](IAsyncResult asyncResult, Object tag) at System.Web.Mvc.Async.AsyncResultWrapper.End(IAsyncResult asyncResult, Object tag) at System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult) at System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.EndProcessRequest(IAsyncResult result) at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) -->

    Read the article

  • event capturing or bubbling

    - by ChampionChris
    I have a link button in a repeater control. the li element is drag and droppable using jquery. when the page loads the the link button works perfectly, the jquery that is attached and the server side code both execute. when I perform a drag and drop then click on the link button it doesn't not fire. when i click it a second time it does fire. If i perform 2 or drag and drops in a row the link button doesn't fire a as many drag and drops as i before it will fire. for example if if perform 3 drag and drops then it will take about 3 click before the events are fired. <asp:Repeater ID="rTracks" runat="server" OnItemDataBound="rTracks_ItemDataBound" EnableViewState="true"> <ItemTemplate> <li onclick="testclick();" class='admin-song ui-selectee <asp:Literal id="ltStatusClass" runat="server" />' mediaid="<%# Eval("MediaId") %>" artistid="<%# Eval("tbMedia.tbArtists.id") %>"><span class="handle"><strong> <%--<%# int.Parse(DataBinder.Eval(Container, "ItemIndex", "")) + 1%>--%><%# Eval("SortNumber")%></strong><%--0:03--%></span> <span class="play"><span class="btn-play">&nbsp;</span></span> <span class="track" title="<%# Eval("tbMedia.Title") %>"> <%# Eval("tbMedia.Title") %></span> <span class="artist"> <%# Eval("tbMedia.tbArtists.Name") %></span> <span class="time" length="<%# Eval("tbMedia.Length") %>"> <asp:Literal ID="ltRuntime" runat="server" /></span> <span class="notes"><span class="btn-notes"> <asp:Literal ID="ltNotesCount" runat="server" /></span></span> <span class="status"> <asp:Literal ID="ltStatus" runat="server" /></span> <span class="date"> <%# Eval("DateAdded") %></span> <span class="remove"><asp:LinkButton ID="lbStatusClass2" runat="server" CssClass="btn-del" OnClick="UpdateStatus" ValidationGroup='<%#Bind("MediaId") %>'> <%--<span class='<asp:Literal id="ltStatusClass2" runat="server" Text="btn-del" />'>--%> &nbsp;<%--</span>--%></asp:LinkButton></span></span> </li> </ItemTemplate> </asp:Repeater> I have onclick event on the li element, when the mouse is clicks the link button the li onclick event is fired even when linkbutton event doesnt fire. My question is if the li captures the event y doesnt the event fire on the linkbutton? What would be stopping the event?

    Read the article

  • how to gzip-compress large Ajax responses (HTML only) in Coldfusion?

    - by frequent
    I'm running Coldfusion8 and jquery/jquery-mobile on the front-end. I'm playing around with an Ajax powered search engine trying to find the best tradeoff between data-volume and client-side processing time. Currently my AJAX search returns 40k of (JQM-enhanced markup), which avoids any client-side enhancement. This way I'm getting by without the page stalling for about 2-3 seconds, while JQM enhances all elements in the search results. What I'm curious is whether I can gzip Ajax responses sent from Coldfusion. If I check the header of my search right now, I'm having this: RESPONSE-header Connection Keep-Alive Content-Type text/html; charset=UTF-8 Date Sat, 01 Sep 2012 08:47:07 GMT Keep-Alive timeout=5, max=95 Server Apache/2.2.21 (Win32) mod_ssl/2.2.21 ... Transfer-Encoding chunked REQUEST-header Accept */* Accept-Encoding gzip, deflate Accept-Language de-de,de;q=0.8,en-us;q=0.5,en;q=0.3 Connection keep-alive Cookie CFID= ; CFTOKEN= ; resolution=1143 Host www.host.com Referer http://www.host.com/dev/users/index.cfm So, my request would accept gzip, deflate, but I'm getting back chunked. I'm generating the AJAX response in a cfsavecontent (called compressedHTML) and run this to eliminate whitespace <cfrscipt> compressedHTML = reReplace(renderedResults, "\>\s+\<", "> <", "ALL"); compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(13), "ALL"); compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(09), "ALL"); </cfscript> before sending the compressedHTML in a response object like this: {"SUCCESS":true,"DATA": compressedHTML } Question If I know I'm sending back HTML in my data object via Ajax, is there a way to gzip the response server-side before returning it vs sending chunked? If this is at all possible? If so, can I do this inside my response object or would I have to send back "pure" HTML? Thanks! EDIT: Found this on setting a 'web.config' for dynamic compression - doesn't seem to work EDIT2: Found thi snippet and am playing with it, although I'm not sure this will work. <cfscript> compressedHTML = reReplace(renderedResults, "\>\s+\<", "> <", "ALL"); compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(13), "ALL"); compressedHTML = reReplace(compressedHTML, "\s{2,}", chr(09), "ALL"); if ( cgi.HTTP_ACCEPT_ENCODING contains "gzip" AND not showRaw ){ cfheader name="Content-Encoding" value="gzip"; bos = createObject("java","java.io.ByteArrayOutputStream").init(); gzipStream = createObject("java","java.util.zip.GZIPOutputStream"); gzipStream.init(bos); gzipStream.write(compressedHTML.getBytes("utf-8")); gzipStream.close(); bos.flush(); bos.close(); encoder = createObject("java","sun.misc. outStr= encoder.encode(bos.toByteArray()); compressedHTML = toString(bos.toByteArray()); } </cfscript> Probably need to try this on the response object and not the compressedTHML variable

    Read the article

  • when importing multiple javascript files the javascript seems to break

    - by waywardmd
    I am trying to incorperate several different js files into one page. For some reason though whichever ones are first, seem to break. Here is the code I am using: <link href="inc/css/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="inc/css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="inc/js/prototype.js"></script> <script type="text/javascript" src="inc/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="inc/js/lightbox.js"></script> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> <script type="text/javascript" src="inc/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="inc/js/jquery.slideshow.lite-0.4.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("#slideshow2").slideshow({ pauseSeconds: 6, height: 196 }); }); </script> The first files are used for a lightbox and other functions and the second ones are used for a slideshow. Depending on the order one or the other will work, but never both at the same time. What am I doing wrong? Any help is greatly appreciated, thanks.

    Read the article

  • Change a dropdown depending on another dropdown

    - by Eric Evans
    I'm trying to create a three select dropdowns that represent a persons birthday. I'm taking into consideration that there are 4 months with 30 days, 7 with 31 ,and 1 with 28 or 29 depending if it's a leap year or not. I would like the days dropdown to show the number of days depending on which month is chosen in the month dropdown. Here's what I have now. Here's the html for the select <!Doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Birthday validation</title> <script src="jquery-1.11.1.min.js"></script> <script src="birthday_drop.js"></script> <link href="style.css" rel="stylesheet /> </head> <body> <h2>Birthday</h2> <fieldset class="birthday-picker"> <select class="birth-month" name="birth[month]"><option>Month</option></select> <select class="birth-day" name="birth[day]"><option>Day</option></select> <select class="birth-year" name="birth[year]"><option>Year</option></select> </fieldset> </body> </html> Here's the jquery that populates the dropdowns and my attempt to use the change function /** * Created by Eric Evans on 8/19/14. */ $(document).ready(function(){ var months = ['January','February','March','April','May','June','July','August','September','October','November','December']; for(i=0; i < months.length; i++){ $("<option value=' + months[i] + '>" + months[i] + "</option>").appendTo('.birth-month'); } for(i=0; i <= 31; i++){ $("<option value=' + i + '>" + i + "</option>").appendTo('.birth-day'); } var myYear = new Date().getFullYear(); for(i=myYear; i >= 1950; i--){ $("<option value=' + i + '>" + i + "</option>").appendTo('.birth-year'); } $('.birth-month').change(function(){ if($(this).val() == 'April'){ for(i=0; i <= 30; i++){ $("<option value=' + i + '>" + i + "</option>").appendTo('.birth-day'); } } }); }); Any help would be greatly appreciated

    Read the article

  • HTML/JS/CSS issue getting bigger by itself

    - by Azzyh
    Here's the picture to begin with. I have this check box, that when you check, then with jQuery toggle(); it hides that you see in first half of the picture (#writeComment) and shows #SCtryVOTE (what you see in the other half picture, to the right). Now i dont know why but of some reason it expands when its checked, why i dont know, is it because it needs more place than it have or? how do i make this work without having problems when its checked. Here's coding: $('#tryout').click(function () { $('#writeComment').toggle(!$(this).attr('checked')); $('#SCtryVOTE').toggle($(this).attr('checked')); }); the js jquery script part, heres the table and divs HTML part: <input type="checkbox" id="tryout"> <table align="center" width="400" cellpadding="0" cellspacing="1" id="theBoxer"> <tr style="background: #686868;"> <td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td> <td align="center" valign="top" width="70" height="25" style="border:1px #FFF solid;">Opret</td> </td> </tr> <tr> <td align="left" valign="top" width="70" height="112" style=""> TEST </td> <td align="left" valign="top" width="70" height="112" style=""> <div id="writeComment"> Smid en kommentar:<br> <form action="javascript:DoInsert()" method="post"> <textarea id="kommentar" name="kommentar"></textarea><br /> <input type="hidden" name="fID" id="fID" value="<? echo $_GET["id"]; ?>"> <input type="submit" name="Submit" value="Sæt ind!"> </form> </div> <div id="SCtryVOTE" style="display: none;"> <form onsubmit="if (!this.comment.cleared) clearContents( document.getElementById('comment') ); return true;" action="javascript:DoSCInsert()" method="post"> <textarea onfocus=" javascript:clearContents(this); this.cleared=true;" rows="5" cols="40" id="comment" name="comment" <?php if($vis["username"] == $pusername) { echo "DISABLED"; } ?>>Tryk for at skrive. Skal være detaljeret og grundet.</textarea> <br>Ja: <input type="radio" value="Y" id="SCvoteY" name="vote"></input> Nej: <input type="radio" id="SCvoteN" value="N" name="vote"> </input> <input type="submit" id="SCstem" name="Submit" value="Stem!"> </form> </div> Maybe you need the CSS part too for these two boxes: #writeComment{ position: relative; left: 5px; top: 10px; } #SCtryVOTE{ position: relative; left: 5px; top: 10px; }

    Read the article

  • Get Image Source URLs from a Different Page Using JS

    - by SDD
    Everyone: I'm trying to grab the source URLs of images from one page and use them in some JavaScript in another page. I know how to pull in images using JQuery .load(). However, rather than load all the images and display them on the page, I want to just grab the source URLs so I can use them in a JS array. Page 1 is just a page with images: <html> <head> </head> <body> <img id="image0" src="image0.jpg" /> <img id="image1" src="image1.jpg" /> <img id="image2" src="image2.jpg" /> <img id="image3" src="image3.jpg" /> </body> </html> Page 2 contains my JS. (Please note that the end goal is to load images into an array, randomize them, and using cookies, show a new image on page load every 10 seconds. All this is working. However, rather than hard code the image paths into my javascript as shown below, I'd prefer to take the paths from Page 1 based on their IDs. This way, the images won't always need to be titled "image1.jpg," etc.) <script type = "text/javascript"> var days = 730; var rotator = new Object(); var currentTime = new Date(); var currentMilli = currentTime.getTime(); var images = [], index = 0; images[0] = "image0.jpg"; images[1] = "image1.jpg"; images[2] = "image2.jpg"; images[3] = "image3.jpg"; rotator.getCookie = function(Name) { var re = new RegExp(Name+"=[^;]+", "i"); if (document.cookie.match(re)) return document.cookie.match(re)[0].split("=")[1]; return''; } rotator.setCookie = function(name, value, days) { var expireDate = new Date(); var expstring = expireDate.setDate(expireDate.getDate()+parseInt(days)); document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"; } rotator.randomize = function() { index = Math.floor(Math.random() * images.length); randomImageSrc = images[index]; } rotator.check = function() { if (rotator.getCookie("randomImage") == "") { rotator.randomize(); document.write("<img src=" + randomImageSrc + ">"); rotator.setCookie("randomImage", randomImageSrc, days); rotator.setCookie("timeClock", currentMilli, days); } else { var writtenTime = parseInt(rotator.getCookie("timeClock"),10); if ( currentMilli > writtenTime + 10000 ) { rotator.randomize(); var writtenImage = rotator.getCookie("randomImage") while ( randomImageSrc == writtenImage ) { rotator.randomize(); } document.write("<img src=" + randomImageSrc + ">"); rotator.setCookie("randomImage", randomImageSrc, days); rotator.setCookie("timeClock", currentMilli, days); } else { var writtenImage = rotator.getCookie("randomImage") document.write("<img src=" + writtenImage + ">"); } } } rotator.check() </script> Can anyone point me in the right direction? My hunch is to use JQuery .get(), but I've been unsuccessful so far. Please let me know if I can clarify!

    Read the article

  • How do I make the info window editable in the Google Maps API?

    - by zjm1126
    I would like to make the info window editable when i click on it. This is my code: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes"> </head> <body onload="initialize()" onunload="GUnload()"> <style type="text/css"> *{ margin:0; padding:0; } </style> <!--<div style="width:100px;height:100px;background:blue;"> </div>--> <div id="map_canvas" style="width: 500px; height: 300px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script> <script type="text/javascript"> var aFn; //********** function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); var center=new GLatLng(39.9493, 116.3975); map.setCenter(center, 13); aFn=function(x,y){ var point =new GPoint(x,y) point = map.fromContainerPixelToLatLng(point); //console.log(point.x+" "+point.y) var marker = new GMarker(point,{draggable:true}); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<b>wwww</b>"); }); map.addOverlay(marker); /********** var marker = new GMarker(point, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml("????..."); }); map.addOverlay(marker); //*/ } $(".b").draggable({ revert: true, revertDuration: 0 }); $("#map_canvas").droppable({ drop: function(event,ui) { //console.log(ui.offset.left+' '+ui.offset.top) aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top); } }); } } </script> </body> </html>

    Read the article

  • Attaching functions to elements in a loop

    - by user435377
    I have the following HTML and JavaScript it works for the first set of elements when I have a '1' in the selector but when I replace the '1' with an 'i' it doesn't attach itself to any of the elements. Any ideas as to why this might not be working? (the script is meant to add the first 3 columns of each row and display it in the fourth) <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ for (i = 2; i <= 14; i++) { $("#Q19_LND_"+i).keyup(function(){ $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val())); }); $("#Q19_CE_"+i).keyup(function(){ $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val())); }); $("#Q19_SOLSD_"+i).keyup(function(){ $("#autoSumRow_"+i).val(Number($("#Q19_LND_"+i).val()) + Number($("#Q19_CE_"+i).val()) + Number($("#Q19_SOLSD_"+i).val())); }); } }); </script> </head> <body> <table> <tr> <td><font face="arial" size="-1">Lap Roux-N-Y</font>&nbsp;</td> <td align="center"><input tabindex="1" type="text" name="Q19_LND_1" size="3" value="" id="Q19_LND_1"></td> <td align="center"><input tabindex="2" type="text" name="Q19_CE_1" size="3" value="" id="Q19_CE_1"></td> <td align="center"><input tabindex="3" type="text" name="Q19_SOLSD_1" size="3" value="" id="Q19_SOLSD_1"></td> <td align="center"><input tabindex="4" disabled type="text" name="autoSumRow_1" size="3" value="" id="autoSumRow_1"></td> </tr> <tr> <td nowrap width="1" bgcolor="#006699" colspan="9"><img src="/images/wi/nothing.gif" width="1" height="1"></td> </tr> <tr> <td><font face="arial" size="-1">Lap Esophagectomy</font>&nbsp;</td> <td align="center"><input tabindex="5" type="text" name="Q19_LND_2" size="3" value="" id="Q19_LND_2"></td> <td align="center"><input tabindex="6" type="text" name="Q19_CE_2" size="3" value="" id="Q19_CE_2"></td> <td align="center"><input tabindex="7" type="text" name="Q19_SOLSD_2" size="3" value="" id="Q19_SOLSD_2"></td> <td align="center"><input tabindex="8" disabled type="text" name="autoSumRow_2" size="3" value="" id="autoSumRow_2"></td> </tr> <tr> </table> </body> </html>

    Read the article

  • FineUploader multiple instances and dynamic naming

    - by RichieMN
    I am using FineUploader 4.0.8 within a MVC4 project using the jquery wrapper. Here is an example of my js code that creates a single instance of the fineUploader and is working just fine. At this time, I have the need for more than one instance of fineUploader, but each individual control doesn't know anything about the other and they're rendered as needed on a page (I've seen previous questions using a jQuery .each, which won't work here). Currently, I can't seem to correctly render any upload buttons, probably due to having an ID duplicated or something. See below for how I'm using MVC's Razor to create unique variables and html IDs for that individual instance. Here's my current implementation where I've added the dynamic values (places where you see _@Model.{PropertyName}): // Uploader control setup var [email protected] = $('#[email protected]').fineUploader({ debug: true, template: '[email protected]', button: $("#[email protected]"), request: { endpoint: '@Url.Action("UploadFile", "Survey")', customHeaders: { Accept: 'application/json' }, params: { [email protected]: (function () { return instance; }), [email protected]: (function () { return surveyItemResultId; }), [email protected]: (function () { return itemId; }), [email protected]: (function () { return loopingCounter++; }) } }, validation: { acceptFiles: ['image/*', 'application/xls', 'application/pdf', 'text/csv', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'], allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp', 'csv', 'xls', 'xlsx', 'pdf', 'xlt', 'xltx', 'txt'], sizeLimit: 1024 * 1024 * 2.5, // 2.5MB stopOnFirstInvalidFile: false }, failedUploadTextDisplay: { mode: 'custom' }, multiple: true, text: { uploadButton: 'Select your upload file(s)' } }).on('submitted', function (event, id, filename) { $("#modal-overlay").fadeIn(); $("#modal-box").fadeIn(); [email protected]++; $(':input[type=button], :input[type=submit], :input[type=reset]').attr('disabled', 'disabled'); }).on('complete', function (event, id, filename, responseJSON) { [email protected]++; if ([email protected] == [email protected]) { $(':input[type=button], :input[type=submit], :input[type=reset]').removeAttr('disabled'); //$("#overlay").fadeOut(); $("#modal-box").fadeOut(); $("#modal-overlay").fadeOut(); } }).on('error', function (event, id, name, errorReason, xhr) { //$("#overlay").fadeOut(); alert('error: ' + errorReason); $("#modal-box").fadeOut(); $("#modal-overlay").fadeOut(); }); }); Using the same principle as above, I've added this logic to the template too. Here's part of my template: <script type="text/template" id="[email protected]"> <div class="qq-uploader-selector qq-uploader"> <div class="qq-upload-drop-area-selector qq-upload-drop-area qq-hide-dropzone"> <span>Drop files here to upload</span> What I see when I use the above code is only the drag and drop section visible, and no button. There are no js errors either. I do have an example that only has one instance of this control on it and the results are the same visible drag and drop section and no button). Any thought as to what's going on? I'll gladly update the question if you find I'm missing something helpful. Please don't just -1 me if it's something I can easily improve or fix.

    Read the article

  • django : nginx : jquery css not being served

    - by PlanetUnknown
    I'm using apache+mod_wsgi for django. And all css/js/images are served through nginx. For some odd, reason when others/friends/colleagues try accessing the site, jquery/css is not getting loaded for them, hence the page looks jumbled up. My html files use code like this - <link rel="stylesheet" type="text/css" href="http://x.x.x.x:8000/css/custom.css"/> <script type="text/javascript" src="http://1x.x.x.x:8000/js/custom.js"></script> My nginx configuration in sites-available is like this - server { listen 8000; server_name localhost; access_log /var/log/nginx/aa8000.access.log; error_log /var/log/nginx/aa8000.error.log; location / { index index.html index.htm; } location /static/ { autoindex on; root /opt/aa/webroot/; } } There is a directory /opt/aa/webroot/static/ which have corresponding css & js directories. The odd thing is that the pages show fine when I access them. I have cleared my cache/etc, but the page loads fine for me, from various browsers. Also, I don't see any 404 any error in the nginx log files. Actually the logs for nginx are not getting refreshed at all. I restarted the nginx server using root, is that incorrect ? There is a user www-data defined in the nginx configuration file. Any pointers would be great.

    Read the article

< Previous Page | 441 442 443 444 445 446 447 448 449 450 451 452  | Next Page >