Search Results

Search found 365 results on 15 pages for 'fadeout'.

Page 13/15 | < Previous Page | 9 10 11 12 13 14 15  | Next Page >

  • show a particular div until content is loaded into another div from xml file in phonegap webservice

    - by Balu
    I am doing a webservice in phonegap.Here the application fetch values from a xml file in remote server when user search particular keyword and load the content to a div in my application.Here my problem is I want to show toast message like "loading..." or "progressing..." till the content is loaded into the div of application.I have created a toast message.But I dont know how to hide the toast message after the content is loaded since the time for fetching values from xml file is different for different keywords. The div to which content is loaded is <ul class="searchresults"></ul>.and my toast function is function toast(sMessage){ var container = $(document.createElement("div")); container.addClass("loading"); var message = $(document.createElement("div")); message.addClass("message"); message.text(sMessage); message.appendTo(container); container.appendTo(document.body); container.delay(150).fadeIn("slow", function() { if ($(".searchresults").html().length > 0) { //$(this).remove(); $(this).delay(500).fadeOut("slow", function() { $(this).remove(); }); } }); } Can anyone help me suggesting some ideas.Thanks in advance.

    Read the article

  • decoding jquery json data in php

    - by Mac Taylor
    hey guys recenlty i made a script to move objects and save the orders now i have a little to do to finish this script everything works fine , just one question : how can i save not numeric data in my json script this is my script : function updateWidgetData(){ var items=[]; $('.widget-title').each(function(){ var weightId=$(this).attr('id'); $('.column').each(function(){ var columnId=$(this).attr('id'); $('.widget', this).each(function(i){ var collapsed=0; if($(this).find('.widget-inside').css('display')=="none") collapsed=1; //Create Item object for current panel var item={ id: $(this).attr('id'), collapsed: collapsed, order : i, column: columnId, weight: weightId }; //Push item object into items array items.push(item); }); }); }); //Assign items array to sortorder JSON variable var sortorder={ items: items }; //Pass sortorder variable to server using ajax to save state $.post('updatePanels.php', 'data='+$.toJSON(sortorder), function(response){ if(response=="success") $("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000); setTimeout(function(){ $('#console').fadeOut(1000); }, 2000); }); } and this is my php script : $data=json_decode($_POST["data"]); foreach($data->items as $item) { //Extract column number for panel $col_id=preg_replace('/[^\d\s]/', '', $item->column); //Extract id of the panel $widget_id=preg_replace('/[^\d\s]/', '', $item->id); $sql="UPDATE widgets SET column_id='$col_id', sort_no='".$item->order."', collapsed='".$item->collapsed."' WHERE id='".$widget_id."'"; mysql_query($sql) or die('Error updating widget DB'); } echo "success"; everything works fine till i use numeric value for columns' id but i need non numeric values forexample id='columnr' i want to extract r but i cant get it right any help plz !?

    Read the article

  • Show Color Picker Value Code Within Input Text Field in Wordpress

    - by Shwan Namiq
    Hi i have options page for my theme i used color picker jquery plugin in my options page as show in image below. i want when i change the color from color picker automatically show the color value code within the text field.how can do this? this is the code within my options page related to appearing the color picker and text field function to register the options setting function YPE_register_settings_sections_fields() { register_setting ( 'YPE_header_option_group', 'YPE_header_option_name', 'YPE_sanitize_validate_callback' ); add_settings_section ( 'YPE_header_section', 'Header Section', 'YPE_header_section_callback', 'YPE_menu_page_options' ); add_settings_field ( 'YPE_header_bg', 'Header Background', 'YPE_header_bg_callback', 'YPE_menu_page_options', 'YPE_header_section' ); } add_action('admin_init', 'YPE_register_settings_sections_fields'); function to appear the text field and color picker function YPE_header_bg_callback() { $YPE_options = get_option('YPE_header_option_name'); $YPE_header_bg = isset($YPE_options['YPE_header_bg']) ? $YPE_options['YPE_header_bg'] : ''; ?> <div class="input-group color-picker"> <input class="form-control" style="width:80px;" name="YPE_header_option_name[YPE_header_bg]" id="<?php echo 'YPE_header_bg'; ?>" type="text" value="<?php echo $YPE_header_bg; ?>" /> <span class="input-group-btn"> <div id="colorSelector"> <div nam style="background-color: #0000ff"> </div> </div> </span> </div> <script> $("#colorSelector").ColorPicker({ color: '#0000ff', onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; }, onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; }, onChange: function (hsb, hex, rgb) { $('#colorSelector div').css('backgroundColor', '#' + hex); }); </script> <?php }

    Read the article

  • Adding image to html markup

    - by user1491991
    Hello guys i'm having a problem appending a image to my html markup which is generated when a button is clicked... wondering if i could some dirction __--------------------------SCRIPT----------------------------------------------------------- (function($){ $.confirm = function(params){ if($('#confirmOverlay').length){ // A confirm is already shown on the page: return false; } var buttonHTML = ''; $.each(params.buttons,function(name,obj){ // Generating the markup for the buttons: buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>'; if(!obj.action){ obj.action = function(){}; } }); var closetext= 'close'; var markup = [ '<div id="confirmOverlay">', '<div id ="model">','<div id="confirmBox">', '<div id="header">','<div id ="title">',params.title,'</div>', '<div id="close">','<ol id = "olclose">','<li id = "liclose">','<a id="close" href = "#">',closetext,'</a></li>', '<li id = "liclose">','<a id="close" href = "#">','<img src="../modal-close.gif"/>','</a></li>','</ol></div></div>', '<div id ="textbox">','<p>',params.message,'<br>','<br>' ,buttonHTML,'</p>', '</div>', '</div></div></div></div>' ].join(''); $(markup).hide().appendTo('body').fadeIn(); var buttons = $('#confirmBox .button'), i = 0; $.each(params.buttons,function(name,obj){ buttons.eq(i++).click(function(){ // Calling the action attribute when a // click occurs, and hiding the confirm. obj.action(); $.confirm.hide(); return false; }); }); } $.confirm.hide = function(){ $('#confirmOverlay').fadeOut(function(){ $(this).remove(); }); } })(jQuery); i've used firebug to check and its unable to fetch the image here

    Read the article

  • Jquery and live act wired but act ok after force refresh in IE

    - by Y.G.J
    hi guys - somthing is wrong with my code and i can't get what it is... i have a div id = "personaltab" i have a form in side it to login the user with username and password. if success the jquery empty the div and puts in the form of the bidding. if the user try to bid the other ajax that assign to the button is working but for some reason skips the empty and just adding the responded ajax to the div i have checked that in IE and chrome and it is working fine in chrome here are my codes $("#login").click(function() { var id = $("input#pid").val(); var user = $("input#puser").val(); var pass = $("input#ppass").val(); var dataString = 'id='+ id + '&user='+ user + '&pass=' + pass; if (user == "") { alert("error"); $("input#puser").focus(); return false; } if (pass == "") { alert("error"); $("input#ppass").focus(); return false; } $.ajax({ type: "POST", url: "loginpersonal.asp", data: dataString, success: function(msg) { if (msg=="False") { alert("error"); $("#personaltab").show(); } else { $("#personaltab").fadeOut("normal",function(){ $("#personaltab").empty(); $("#personaltab").append(msg); $("#personaltab").slideDown(); }); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert('error'); } }); return false; }); $("#sendbid").live("click", function(){ var startat = $("input[name=startat]").val(); var sprice = $("input[name=sprice]").val(); if (parseInt(sprice)<=parseInt(startat)) { alert("error"); $("input[name=sprice]").focus(); return false; } else { var payment = $("select[name=payment]").val(); if ($('input[name=credit]').is(':checked') ){ var credit = true; } var prodid = $("input[name=id]").val(); var dataString = 'id='+ prodid + '&price='+ sprice + '&payment=' + payment + '&credit=' + credit; $.ajax({ type: "POST", url: "loginpersonal.asp", data: dataString, success: function(msg) { $("#personaltab").empty(); $("#personaltab").append(msg); $("#personaltab").show(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert('error'); } }); } return false; });

    Read the article

  • jQuery Cycle plugin IE6/7 issues

    - by Aaron Moodie
    I've implemented a slideshow using the Cycle plugin, which is working in all browsers except IE6&7, where the images just show up in a list, and the #page_copy div is not hiding. I've been going through the code all day without any luck, and not exactly sure how or what I should be looking for. What would be the best way to go about debugging this issue? I know that the #page_copy div is hiding when I remove the rest of the code, and I've tried the reverse (which had no result) <script type="text/javascript" charset="utf-8"> jQuery.fn.fadeToggle = function(speed, easing, callback) { return this.animate({opacity: 'toggle'}, speed, easing, callback); }; $(document).ready(function() { $('#page_copy').hide(); $('a#info_close_button').click(function() { $('#page_copy').fadeOut(200); return false; }); $('a#info_button').click(function() { $('#page_copy').fadeToggle(200); return false; }); }); $(window).load(function() { // vertically center single image var $image_cnt = $("#images > img").size(); if($image_cnt < 2) { var $single_img = $("#images").children(':first-child'); var h = $single_img.height(); $single_img.css({ marginTop: (620 - h) / 2, }); $(".next").css("display","none"); $(".prev").css("display","none"); } }); // wait until images have loaded before starting cycle $(window).load(function() { // front image rotator $('#images').cycle({ fx: 'fade', speed: 300, next: '.next', prev: '.prev', containerResize: 0, timeout: 0, delay: -2000, before: onBefore }); }); // hide all but the first image when page loads $(document).ready(function() { $('#images img:gt(0)').hide(); }); // callback fired when each slide transition begins function onBefore(curr,next,opts) { var $slide = $(next); var w = $slide.width(); var h = $slide.height(); $slide.css({ marginTop: (620 - h) / 2, marginLeft: (650 - w) / 2 }); }; </script>

    Read the article

  • Why is jQuery .load() firing twice?

    - by LeslieOA
    Hello S-O. I'm using jQuery 1.4 with jQuery History and trying to figure out why Firebug/Web Inspector are showing 2 XHR GET requests on each page load (double that amount when visiting my sites homepage (/ or /#). e.g. Visit this (or any) page with Firebug enabled. Here's the edited/relevant code (see full source): - $(document).ready(function() { $('body').delegate('a', 'click', function(e) { var hash = this.href; if (hash.indexOf(window.location.hostname) > 0) { /* Internal */ hash = hash.substr((window.location.protocol+'//'+window.location.host+'/').length); $.historyLoad(hash); return false; } else if (hash.indexOf(window.location.hostname) == -1) { /* External */ window.open(hash); return false; } else { /* Nothing to do */ } }); $.historyInit(function(hash) { $('#loading').remove(); $('#container').append('<span id="loading">Loading...</span>'); $('#ajax').animate({height: 'hide'}, 'fast', 'swing', function() { $('#page').empty(); $('#loading').fadeIn('fast'); if (hash == '') { /* Index */ $('#ajax').load('/ #ajax','', function() { ajaxLoad(); }); } else { $('#ajax').load(hash + ' #ajax', '', function(responseText, textStatus, XMLHttpRequest) { switch (XMLHttpRequest.status) { case 200: ajaxLoad(); break; case 404: $('#ajax').load('/404 #ajax','', ajaxLoad); break; // Default 404 default: alert('We\'re experiencing technical difficulties. Try refreshing.'); break; } }); } }); // $('#ajax') }); // historyInit() function ajaxLoad() { $('#loading').fadeOut('fast', function() { $(this).remove(); $('#ajax').animate({height: 'show', opacity: '1'}, 'fast', 'swing'); }); } }); A few notes that may be helpful: - Using WordPress with default/standard .htaccess I'm redirecting /links-like/this to /#links-like/this via JavaScript only (PE) I'm achieving the above with window.location.replace(addr); and not window.location=addr; Feel free to visit my site if needed. Thanks in advanced.

    Read the article

  • How do I prevent the concurrent execution of a javascript function?

    - by RyanV
    I am making a ticker similar to the "From the AP" one at The Huffington Post, using jQuery. The ticker rotates through a ul, either by user command (clicking an arrow) or by an auto-scroll. Each list-item is display:none by default. It is revealed by the addition of a "showHeadline" class which is display:list-item. HTML for the UL Looks like this: <ul class="news" id="news"> <li class="tickerTitle showHeadline">Test Entry</li> <li class="tickerTitle">Test Entry2</li> <li class="tickerTitle">Test Entry3</li> </ul> When the user clicks the right arrow, or the auto-scroll setTimeout goes off, it runs a tickForward() function: function tickForward(){ var $active = $('#news li.showHeadline'); var $next = $active.next(); if($next.length==0) $next = $('#news li:first'); $active.stop(true, true); $active.fadeOut('slow', function() {$active.removeClass('showHeadline');}); setTimeout(function(){$next.fadeIn('slow', function(){$next.addClass('showHeadline');})}, 1000); if(isPaused == true){ } else{ startScroll() } }; This is heavily inspired by Jon Raasch's A Simple jQuery Slideshow. Basically, find what's visible, what should be visible next, make the visible thing fade and remove the class that marks it as visible, then fade in the next thing and add the class that makes it visible. Now, everything is hunky-dory if the auto-scroll is running, kicking off tickForward() once every three seconds. But if the user clicks the arrow button repeatedly, it creates two negative conditions: Rather than advance quickly through the list for just the number of clicks made, it continues scrolling at a faster-than-normal rate indefinitely. It can produce a situation where two (or more) list items are given the .showHeadline class, so there's overlap on the list. I can see these happening (especially #2) because the tickForward() function can run concurrently with itself, producing different sets of $active and $next. So I think my question is: What would be the best way to prevent concurrent execution of the tickForward() method? Some things I have tried or considered: Setting a Flag: When tickForward() runs, it sets an isRunning flag to true, and sets it back to false right before it ends. The logic for the event handler is set to only call tickForward() if isRunning is false. I tried a simple implementation of this, and isRunning never appeared to be changed. The jQuery queue(): I think it would be useful to queue up the tickForward() commands, so if you clicked it five times quickly, it would still run as commanded but wouldn't run concurrently. However, in my cursory reading on the subject, it appears that a queue has to be attached to the object its queue applies to, and since my tickForward() method affects multiple lis, I don't know where I'd attach it.

    Read the article

  • How to change image through click - javascript

    - by Elmir Kouliev
    I have a toolbar that has 5 table cells. The first cell looks clear, and the other 4 have a shade over them. I want to make it so that clicking on the table cell will also change the image so that the shade will also change in respect to the current table cell that is selected. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <title>X?B?RL?R V? HADIS?L?R</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="N&SAz.css" /> <link rel="shortcut icon" href="../../Images/favicon.ico" /> <script type="text/javascript"> var switchTo5x = true; </script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript"> stLight.options({ publisher: "581d0c30-ee9d-4c94-9b6f-a55e8ae3f4ae" }); </script> <script src="../../jquery-1.7.2.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function () { $(".fade").css("display", "none"); $(".fade").fadeIn(20); $("a.transition").click(function (event) { event.preventDefault(); linkLocation = this.href; $("body").fadeOut(500, redirectPage); }); function redirectPage() { window.location = linkLocation; } }); $(document).ready(function () { $('.preview').hide(); $('#link_1').click(function () { $('#latest_story_preview1').hide(); $('#latest_story_preview2').hide(); $('#latest_story_preview3').hide(); $('#latest_story_preview4').hide(); $('#latest_story_main').fadeIn(800); }); $('#link_2').click(function () { $('#latest_story_main').hide(); $('#latest_story_preview2').hide(); $('#latest_story_preview3').hide(); $('#latest_story_preview4').hide(); $('#latest_story_preview1').fadeIn(800); }); $('#link_3').click(function () { $('#latest_story_main').hide(); $('#latest_story_preview1').hide(); $('#latest_story_preview3').hide(); $('#latest_story_preview4').hide(); $('#latest_story_preview2').fadeIn(800); }); $('#link_4').click(function () { $('#latest_story_main').hide(); $('#latest_story_preview1').hide(); $('#latest_story_preview2').hide(); $('#latest_story_preview4').hide(); $('#latest_story_preview3').fadeIn(800); }); $('#link_5').click(function () { $('#latest_story_main').hide(); $('#latest_story_preview1').hide(); $('#latest_story_preview2').hide(); $('#latest_story_preview3').hide(); $('#latest_story_preview4').fadeIn(800); }); $(".fade").css("display", "none"); $(".fade").fadeIn(1200); $("a.transition").click(function (event) { event.preventDefault(); linkLocation = this.href; $("body").fadeOut(500, redirectPage); }); }); </script> </head> <body id="body" style="background-color:#FFF;" onload="document"> <div style="margin:0px auto;width:1000px;" id="all_content"> <div id="top_content" style="background-color:transparent;"> <ul id="translation_list"> <li> <a href=""> AZ </a> </li> <li> <a href="#"> RUS </a> </li> <li> <a href="#"> ENG </a> </li> </ul> <div id="share_buttons"> <span class='st_facebook' displayText='' title="Facebook"></span> <span class='st_twitter' displayText='' title="Twitter"></span> <span class='st_linkedin' displayText='' title="Linkedin"></span> <span class='st_googleplus' displayText='' title="Google +"></span> <span class='st_email' displayText='' title="Email"></span> </div> <img src="../../Images/RasulGuliyev.png" width="330" height="80" id="top_logo"> <br /> <br /> <div class="fade" id="navigation"> <ul> <font face="Verdana, Geneva, sans-serif"> <li> <a href="../../index.html"> ANA S?HIF? </a> </li> <li> <a href="../biographyAZ.html"> BIOQRAFIYA </a> </li> <li style="background-color:#9C1A35;"> <a href="#"> X?B?RL?R V? HADIS?L?R </a> </li> <li> <a> PROQRAM </a> </li> <li> <a> SEÇICIL?R </a> </li> <li> <a> ?LAQ?L?R</a> </li> </font> </ul> </div> <font face="Tahoma, Geneva, sans-serif"> <br /> <div id="navigation2"> <ul> <a> <li><i> HADIS?L?R </i></li> </a> <a> <li><i>VIDEOLAR</i> </li> </a> </ul> </div> <div id="news_section" style="background-color:#FFF;"> <h3 style="font-weight:100; font-size:22px; font-style:normal; color:#7C7C7C;">Son X?b?rl?r</h3> <div class="fade" id="Latest-Stories"> <table id="stories-preview" width="330" height="598" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a id="link_1" href="#"><img src="../../Images/N&EImages/images/Article-Nav-Bar1_01.gif" width="330" height="114" alt=""></a> </td> </tr> <tr> <td> <a id="link_2" href="#"> <img src="../../Images/N&EImages/images/Article-Nav-Bar1_02.gif" width="330" height="109" alt=""> </a> </td> </tr> <tr> <td> <a id="link_3" href="#"> <img src="../../Images/N&EImages/images/Article-Nav-Bar1_03.gif" width="330" height="132" alt=""></a> </td> </tr> <tr> <td> <a id="link_4" href="#"><img src="../../Images/N&EImages/images/Article-Nav-Bar1_04.gif" width="330" height="124" alt=""></a> </td> </tr> <tr> <td> <a id="link_5" href="#"><img src="../../Images/N&EImages/images/Article-Nav-Bar1_05.gif" width="330" height="119" alt=""></a> </td> </tr> </table> <div class="fade" id="latest_story_main"> <!--START--> <img src="../../Images/N&EImages/GuliyevFace.jpeg" style="padding:4px; margin-top:6px; border-style:groove; border-width:thin; margin-left:90px;" /> <a href="#"> <h2 style="font-weight:100; font-style:normal;"> "Bizim V?zif?miz Az?rbaycan Xalqinin T?zyiq? M?ruz Qalmamasini T?min Etm?kdir" </h2> </a> <h5 style="font-weight:100; font-size:12px; color:#888; opacity:.9;"> <img src="../../Images/ClockImage.png" />IYUN 19, 2012 BY RASUL GULIYEV - R?SUL QULIYEV</h5> <p style="font-size:14px; font-style:normal;">ACP-nin v? Müqavim?t H?r?katinin lideri, eks-spiker R?sul Quliyev "Yeni Müsavat"a müsahib? verib. O, son vaxtlar ACP-d? bas ver?n kadr d?yisiklikl?ri, bar?sind? dolasan söz-söhb?tl?r v? dig?r m?s?l?l?r? aydinliq g?tirib. Müsahib?ni t?qdim edirik. – Az?rbaycanda siyasi günd?mi ?hat? ed?n m?s?l?l?rd?n biri d? Sülh?ddin ?kb?rin ACP-y? s?dr g?tirilm?sidir. Ideya v? t?s?bbüs kimin idi? – ?vv?ll?r d? qeyd <a href="#"> [...]</a> </p> <!--FIRST STORY END --> </div> <div class="preview" id="latest_story_preview1"> <!--START--> <img src="../../Images/N&EImages/GuliyevFace2.jpeg" style="padding:4px; margin-top:6px; border-style:groove; border-width:thin; margin-left:90px;" /> <a href="#"> <h2 style="font-weight:100; font-style:normal;"> "S?xsiyy?ti Alçaldilan Insanlarin Qisasi Amansiz Olur" </h2></a> <h5 style="font-weight:100; font-size:12px; color:#888; opacity:.9;"> <img src="../../Images/ClockImage.png" />IYUN 12, 2012 BY RASUL GULIYEV - R?SUL QULIYEV</h5> <p style="font-size:14px; font-style:normal;">R?sul Quliyev: "Az?rbaycanda müxalif?tin görün?n f?aliyy?ti ?halinin hökum?td?n naraziliq potensialini ifad? etmir" Eks-spiker Avropa görüsl?rinin yekunlarini s?rh etdi ACP lideri R?sul Quliyevin Avropa görüsl?ri basa çatib. S?f?rin yekunlari bar?d? R?sul Quliyev eksklüziv olaraq "Yeni Müsavat"a açiqlama verib. Norveçd? keçiril?n görüsl?rd? Açiq C?miyy?t v? Liberal Demokrat partiyalarinin s?drl?ri Sülh?ddin ?kb?r, Fuad ?liyev v? Müqavim?t H?r?kati Avropa <a href="#"> [...]</a> </p> <!--SECOND STORY END --> </div> <div class="preview" id="latest_story_preview2"> <!--START--> <img src="../../Images/N&EImages/GuliyevFace3.jpeg" style="padding:4px; margin-top:6px; border-style:groove; border-width:thin; margin-left:90px;" /> <a href="#"> <h2 style="font-weight:100; font-style:normal;"> R?sul Quliyevin Iyunun 4, 2012-ci ild? Bryusseld?ki Görüsl?rl? ?laq?dar Çixisi </h2></a> <h5 style="font-weight:100; font-size:12px; color:#888; opacity:.9;"> <img src="../../Images/ClockImage.png" />IYUN 4, 2012 BY RASUL GULIYEV - R?SUL QULIYEV</h5> <p style="font-size:14px; font-style:normal;">Brüssel görüsl?ri – Az?rbaycanda xalqin malini ogurlayan korrupsioner Höküm?t liderl?rinin xarici banklarda olan qara pullari v? ?mlaklarinin dondurulmasina çox qalmayib. Camaatin hüquqlarini pozan polis, prokuratura v? m?hk?m? isçil?rin? v? onlarin r?hb?rl?rin? viza m?hdudiyy?tl?ri qoymaqda reallasacaq. R?sul Quliyevin Iyunun 4, 2012-ci ild? Bryusseld?ki Görüsl?rl? ?laq?dar Çixisi Rasul Guliyev's Speech on June 4, 2012 about Brussels Meetings <a href="#">[...]</a> </p> <!--THIRD STORY END --> </div> <div class="preview" id="latest_story_preview3"> <!--START--> <img src="../../Images/N&EImages/GuliyevGroup1.jpeg" style="padding:4px; margin-top:6px; border-style:groove; border-width:thin; margin-left:90px;" /> <a href="#"> <h2 style="font-weight:100; font-style:normal;"> R?sul Quliyevin Avropa Parlamentind? v? Hakimiyy?t Qurumlarinda Görüsl?ri Baslamisdir </h2></a> <h5 style="font-weight:100; font-size:12px; color:#888; opacity:.9;"> <img src="../../Images/ClockImage.png" />MAY 31, 2012 BY RASUL GULIYEV - R?SUL QULIYEV</h5> <p style="font-size:14px; font-style:normal;">Aciq C?miyy?t Partiyasinin lideri, eks-spiker R?sul Quliyev Avropa Parlamentind? görüsl?rini davam etdirir. Bu haqda "Yeni Müsavat"a R.Quliyev özü m?lumat verib. O bildirib ki, görüsl?rd? Liberal Demokrat Partiyasinin s?dri Fuad ?liyev v? R.Quliyevin Skandinaviya ölk?l?ri üzr? müsaviri Rauf K?rimov da istirak edirl?r. Eks-spiker deyib ki, bu görüsl?r 2013-cü ild? keçiril?c?k prezident seçkil?rind? saxtalasdirmanin qarsisini almaq planinin [...]</p> <!--FOURTH STORY END --> </div> <div class="preview" id="latest_story_preview4"> <!--START--> <img src="../../Images/N&EImages/GuliyevGroup2.jpeg" style="padding:4px; margin-top:6px; border-style:groove; border-width:thin; margin-left:90px;" /> <a href="#"> <h2 style="font-weight:100; font-style:normal;"> Norveçin Oslo S?h?rind? Parlament Üzvl?ri il? v? Xarici Isl?r Nazirliyind? Görüsl?r </h2></a> <h5 style="font-weight:100; font-size:12px; color:#888; opacity:.9;"> <img src="../../Images/ClockImage.png" />MAY 30, 2012 BY RASUL GULIYEV - R?SUL QULIYEV</h5> <p style="font-size:14px; font-style:normal;">R?sul Quliyev Norveçin Oslo s?h?rind? Parlament üzvl?ri v? Xarici isl?r nazirliyind? görüsl?r keçirmisdir. Bu görüsl?rd? Az?rbaycandan Liberal Demokrat Partiyasinin s?dri Fuad ?liyev, Avro-Atlantik Surasinin s?dri Sülh?ddin ?kb?r v? Milli Müqavim?t H?r?katinin Skandinaviya ölk?l?ri üzr? nümay?nd?si Rauf K?rimov istirak etmisdir. Siyasil?r ilk ?vv?l mayin 22-d? Norveç Parlamentinin Avropa Surasinda t?msil ed?n nümay?nd? hey?tinin üzvül?ri Karin S. [...]</a> </p> <!--FIFTH STORY END --> </div> <hr /> </div> <!--LATEST STORIES --> <div class="fade" id="article-section"> <h3 style="font-weight:100; font-size:22px; font-style:normal; color:#7C7C7C;">Çecin X?b?rl?r</h3> <div class="older-article"> <img src="../../Images/N&EImages/GuliyevGroup2.jpeg" style="padding:4px; margin-top:6px; border-style:groove; border-width:thin; margin-left:90px;" /> <a href="#"> <h2 style="font-weight:100; font-style:normal;"> Norveçin Oslo S?h?rind? Parlament Üzvl?ri il? v? Xarici Isl?r Nazirliyind? Görüsl?r </h2></a> <h5 style="font-weight:100; font-size:12px; color:#888; opacity:.9;"> <img src="../../Images/ClockImage.png" />MAY 30, 2012 BY RASUL GULIYEV - R?SUL QULIYEV</h5> <p style="font-size:14px; font-style:normal;">R?sul Quliyev Norveçin Oslo s?h?rind? Parlament üzvl?ri v? Xarici isl?r nazirliyind? görüsl?r keçirmisdir. Bu görüsl?rd? Az?rbaycandan Liberal Demokrat Partiyasinin s?dri Fuad ?liyev, Avro-Atlantik Surasinin s?dri Sülh?ddin ?kb?r v? Milli Müqavim?t H?r?katinin Skandinaviya ölk?l?ri üzr? nümay?nd?si Rauf K?rimov istirak etmisdir. Siyasil?r ilk ?vv?l mayin 22-d? Norveç Parlamentinin Avropa Surasinda t?msil ed?n nümay?nd? hey?tinin üzvül?ri Karin S. [...]</a> </p> </div> <hr /> </div> <!--NEWS SECTION--> </font> <h3 class="fade" id="footer">Rasul Guliyev 2012</h3> </div> </body> </head> </html>

    Read the article

  • Populating fields in modal form using PHP, jQuery

    - by Benjamin
    I have a form that adds links to a database, deletes them, and -- soon -- allows the user to edit details. I am using jQuery and Ajax heavily on this project and would like to keep all control in the same page. In the past, to handle editing something like details about another website (link entry), I would have sent the user to another PHP page with form fields populated with PHP from a MySQL database table. How do I accomplish this using a jQuery UI modal form and calling the details individually for that particular entry? Here is what I have so far- <?php while ($linkDetails = mysql_fetch_assoc($getLinks)) {?> <div class="linkBox ui-corner-all" id="linkID<?php echo $linkDetails['id'];?>"> <div class="linkHeader"><?php echo $linkDetails['title'];?></div> <div class="linkDescription"><p><?php echo $linkDetails['description'];?></p> <p><strong>Link:</strong><br/> <span class="link"><a href="<?php echo $linkDetails['url'];?>" target="_blank"><?php echo $linkDetails['url'];?></a></span></p></div> <p align="right"> <span class="control"> <span class="delete addButton ui-state-default">Delete</span> <span class="edit addButton ui-state-default">Edit</span> </span> </p> </div> <?php }?> And here is the jQuery that I am using to delete entries- $(".delete").click(function() { var parent = $(this).closest('div'); var id = parent.attr('id'); $("#delete-confirm").dialog({ resizable: false, modal: true, title: 'Delete Link?', buttons: { 'Delete': function() { var dataString = 'id='+ id ; $.ajax({ type: "POST", url: "../includes/forms/delete_link.php", data: dataString, cache: false, success: function() { parent.fadeOut('slow'); $("#delete-confirm").dialog('close'); } }); }, Cancel: function() { $(this).dialog('close'); } } }); return false; }); Everything is working just fine, just need to find a solution to edit. Thanks!

    Read the article

  • jQuery ajaxSubmit ignored by IE8

    - by George Burrell
    Hi there, I am combing the jQuery validation plug-in with the jQuery Form Plugin to submit the form via AJAX. This works perfectly in Firefox & Chrome, but (as usual) Internet Explorer is being a pain. For reasons that are alluding me, IE is ignoring the ajaxSubmit, as a result it submits the form in the normal fashion. I've followed the validation plug-in's documentation when constructing my code: JS: $(document).ready(function() { var validator = $("#form_notify").validate({ messages: { email: { required: 'Please insert your email address. Without your email address we will not be able to contact you!', email:'Please enter a valid email address. Without a valid email address we will not be able to contact you!' } }, errorLabelContainer: "#error", success: "valid", submitHandler: function(form) {$(form).ajaxSubmit();} }); $('#email').blur(function() { if (validator.numberOfInvalids() 0) { $("#label").addClass("label_error"); return false; } else {$("#label").removeClass("label_error");} }); $('#form_notify').submit(function() { if (validator.numberOfInvalids() == 0) { $(this).fadeOut('fast', function() {$('#thank-you').fadeIn();}); return true; } return false; }); }); Form HTML: <form id="form_notify" class="cmxform" name="form_notify" action="optin.pl" method="get"> <fieldset> <div class="input"> <label id="label" for="email">Email Address:</label> <input type="text" id="email" name="email" value="" title="email address" class="{required:true, email:true}"/> <div class="clearfix"></div> </div> <input type="hidden" name="key" value="sub-745-9.224;1.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0;;subscribe-224.htm"> <input type="hidden" name="followup" value="19"> <input type="submit" name="submit" id="submit-button" value="Notify Me"> <div id="error"></div> </fieldset> </form> I can't understand what is causing IE to act differently, any assistance would be greatly appreciated. I can provide more information if needed. Thanks in advance!

    Read the article

  • Not able to delete list which dynamically created with jquery.

    - by shin
    I have two html here. The first one is dynamically generated by php and second one is just html to test. I also have the following jquery. When I click a cross with class delete in the second ones(plain html), it works nicely. However when I click a cross in the first ones, it does not work. It redirect me to the home page with # at the end. I am hoping someone point out what I am doing wrong. Thank in advance. HTML First part (dyanmicall generated) <ul style="display: block;" id="message"> <li class="41"> <span class="user"><strong>shin</strong></span> <span class="msg"> delete this as well</span> <span class="date">2010-01-15 07:47:31</span> <a href="#" id="41" class="delete">x</a> <div class="clear"></div></li> <li class="40"> <span class="user"><strong>shin</strong></span> <span class="msg"> delete me as well</span> <span class="date">2010-01-14 16:01:44</span> <a href="#" id="40" class="delete">x</a> <div class="clear"></div></li> ... ...</ul> Second part which is plain html <ul id="another"> <li><a href="#">you can't delete me</a></li> <li><a href="#" class="delete">delete this</a></li> <li><a href="#" class="delete">delete this</a></li> </ul> Here is jquery $(".delete").click(function(event) { event.preventDefault(); loading.fadeIn(); var commentContainer = $(this).parent(); var id = $(this).attr("id"); // var string = 'id='+ id ; $.ajax({ type: "POST", url: "index.php/admin/messages/changestatus/"+id, // data: string, cache: false, success: function(){ commentContainer.slideUp('slow', function() {$(this).remove();}); loading.fadeOut(); } }); return false; }); I am using CodeIgniter by the way.

    Read the article

  • problem in saving drag&drop object in database

    - by Mac Taylor
    hey guys i made a script inspired by wordpress widgets'page to drag&drop blocks of my sites but problem is in saving the position after droping this is jquery code , i used to do the above target : <script type="text/javascript" >$(function(){ $('.widget') .each(function(){ $(this).hover(function(){ $(this).find('h4').addClass('collapse'); }, function(){ $(this).find('h4').removeClass('collapse'); }) .find('h4').hover(function(){ $(this).find('.in-widget-title').css('visibility', 'visible'); }, function(){ $(this).find('.in-widget-title').css('visibility', 'hidden'); }) .click(function(){ $(this).siblings('.widget-inside').toggle(); //Save state on change of collapse state of panel updateWidgetData(); }) .end() .find('.in-widget-title').css('visibility', 'hidden'); }); $('.column').sortable({ connectWith: '.column', handle: 'h4', cursor: 'move', placeholder: 'placeholder', forcePlaceholderSize: true, opacity: 0.4, start: function(event, ui){ //Firefox, Safari/Chrome fire click event after drag is complete, fix for that if($.browser.mozilla || $.browser.safari) $(ui.item).find('.widget-inside').toggle(); }, stop: function(event, ui){ ui.item.css({'top':'0','left':'0'}); //Opera fix if(!$.browser.mozilla && !$.browser.safari) updateWidgetData(); } }) .disableSelection(); }); function updateWidgetData(){ var items=[]; $('.column').each(function(){ var columnId=$(this).attr('id'); $('.widget', this).each(function(i){ var collapsed=0; if($(this).find('.widget-inside').css('display')=="none") collapsed=1; //Create Item object for current panel var item={ id: $(this).attr('id'), collapsed: collapsed, order : i, column: columnId }; //Push item object into items array items.push(item); }); }); //Assign items array to sortorder JSON variable var sortorder={ items: items }; //Pass sortorder variable to server using ajax to save state $.post('updatePanels.php', 'data='+$.toJSON(sortorder), function(response){ if(response=="success") $("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000); setTimeout(function(){ $('#console').fadeOut(1000); }, 2000); }); } </script> and a simple php file but problem is its not sending data to target php file is there anything wrong with my code ?

    Read the article

  • jquery xml slideshow using ajax

    - by Codemaster Snake
    Hi all, I am trying to create a JQuery based slider using ajax to load images url from a xml file and then creating a html li list dynamically. Till now I am able to append and create DOM structure using Jquery. But I am not able to access the dynamically created list. I have also tried custom events using bind but not able to successfully implement it. Following is my jquery plugin code: (function($){ $.fn.genie = function(options) { var genie_dom = "<div class='genie_wrapper'><ul class='genie'></ul></div>"; var o, base; var genie_styles = "<style>.genie_wrapper{overflow:hidden}.genie{position: relative;margin:0;padding:0}.genie li {position: absolute;margin:0;padding:0}</style>"; var defaults = { width : '960px', height : '300px', background_color : '#000000', xml : 'genie.xml', speed : 1000, pause: 1000 }; base = $(this); o = $.extend(defaults, options); return this.each(function() { create_elements(); }); function create_elements() { $(base).html(genie_dom); $('head').append(genie_styles); $('.genie_wrapper').css({'background-color' : o.background_color, width : o.width, height: '300px', overflow: ''}); $.ajax({ type: "GET", url: o.xml, dataType: "xml", success: function(xml) { var slides = $(xml).find('slide'); var count = 0; $(slides).each(function(){ $('.genie').append('<li class="slide" id="slide'+count+'"><img src="' + $(this).text() + '" /></li>'); $('.genie li:last').css({'z-index' : count}); count++; }); } }); } } })(jQuery); In my html file: There is only one empty div to which I am calling my plugin like $(document).ready(function() { $('.slideshow').genie(); }); I have also tried using following everywhere in JS: $(".slide").bind("start_animation", function(e){ $(this).fadeOut(1000); alert($(this).html()); }); $(".slide").trigger("start_animation"); I want to animate li list using animate function, Can anyone please tell me how to implement it... It would be of great help... Regards, Neeraj Kumar EDIT: Can Anyone help me out please????

    Read the article

  • Beginner problem with posting data table to JsonResult

    - by ognjenb
    With this script I get data from JsonResult (GetDevicesTable) and put them to table ( id="OrderDevices") <script type="text/javascript"> $(document).ready(function() { $("#getDevices a").click(function() { var Id = $(this).attr("rel"); var rowToMove = $(this).closest("tr"); $.post("/ImportXML/GetDevicesTable", { Id: Id }, function(data) { if (data.success) { //remove row rowToMove.fadeOut(function() { $(this).remove() }); //add row to other table $("#OrderDevices").append("<tr><td>"+ data.DeviceId+ "</td><td>" + data.Id+ "</td><td>" + data.OrderId + "</td></tr>"); } else { alert(data.ErrorMsg); } }, "json"); }); }); <% using (Html.BeginForm()) {%> <table id="OrderDevices" class="data-table"> <tr> <th> DeviceId </th> <th> Id </th> <th> OrderId </th> </tr> </table> <p> <input type="submit" value="Submit" /> </p> <% } %> When click on Submit I need something like this: $(document).ready(function() { $("#submit").click(function() { var Id = $(this).attr("rel"); var DeviceId = $(this).attr(???); var OrderId = $(this).attr(???); var rowToMove = $(this).closest("tr"); $.post("/ImportXML/DevicesActions", { Id: Id, DeviceId:DeviceId, OrderId:OrderId }, function(data) { }, "json"); }); }); I have problem with this script because do not know how post data to this JsonResult: public JsonResult DevicesActions(int Id,int DeviceId,int OrderId) { orderdevice ord = new orderdevice(); ord.Id = Id; ord.OrderId = DeviceId; ord.DeviceId = OrderId; DBEntities.AddToorderdevice(ord); DBEntities.SaveChanges(); }

    Read the article

  • Parsing secure entries XML file with jquery

    - by user573131
    Apologies if this is elementary. I'm primarily a front end designer/dev. I have webform through a form service called wufoo. Wufoo generates a lovely XML (or json) file that can be grabed and parsed. I'm trying to grab the entries xml feed that is associated with the form and parse it via jquery to show who has entered. Im using the following code (which works with a local xml file). http://bostonwebsitemakeover.com/2/test <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script> $(document).ready(function () { $.ajax({ type: "GET", url: "people.xml", dataType: "xml", success: xmlParser }); }); function xmlParser(xml) { $('#load').fadeOut(); $(xml).find("Entry").each(function () { $(".main").append('<div class="entry">' + $(this).find("Field1").text() + ' ' + $(this).find("Field2").text() + ' http://twitter.com/' + $(this).find("Field17").text() + '</div>'); $(".entry").fadeIn(1000); }); } </script> My XML file contains the following: <?xml version="1.0"?> <Entries> <Entry> <EntryId>1</EntryId> <Field1>Meaghan</Field1> <Field2>Severson</Field2> <Field17/> </Entry> <Entry> <EntryId>2</EntryId> <Field1>Michael</Field1> <Field2>Flint</Field2> <Field17>michaelflint</Field17> </Entry> <Entry> <EntryId>3</EntryId> <Field1>Niki</Field1> <Field2>Brown</Field2> <Field17>nikibrown</Field17> </Entry> <Entry> <EntryId>4</EntryId> <Field1>Niki</Field1> <Field2>Brown</Field2> <Field17>nikibrown</Field17> </Entry> </Entries> I'm wondering how I would do this with the xml file hosted on the wufoo (which is https) So I guess Im asking how do I authenticate the feed via jquery? Or do i need to do this via json? Could someone explain how?

    Read the article

  • menu with: hover, click, class change and ajax

    - by abdullah kahraman
    Hello! I have made a menu that adds class "active" on hover to each li, and removes the class when hovered out, except on li s that has a class "active" already. So far, this is done. However I have another .click() on every li that loads a content to somewhere with ajax. The problem starts here, when I click, I want to add class "active" to clicked element and remove class from all of them. I add the class, but the li that had class "active" before the click doesn't get "active" when hovered, I think the "active" class is not removed from it? Can anyone help? <div id="menu"> <ul> <li><a href="index.php" id="homeLink">home</a></li> <li><a href="#">news</a></li> <li><a id="test" href="#" class="active">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> <li><a href="contact.php" id="contactLink">contact</a></li> <li id="ajaxP" style="display:none"><img alt="loading" style="border:none;" src="images/ajax-loader.gif"/></li> </ul> </div> Here is the jquery: $("#menu").find("a").not(".active").each(function(){ $(this).hover(function(){ alert($(this)); $(this).addClass("active"); },function(){ $(this).not(".clicking").removeClass("active"); }); }); $("#homeLink").click(function(){ var myThis=$(this); $("#ajaxP").fadeIn("slow"); $("#normalcontent").hide("slow").load("index.php #normalcontent").slideDown("slow"); $("#primarycontainer").hide("slow").load("index.php #primarycontainer").slideDown("slow"); $("#ajaxP").fadeOut("normal"); $("#menu").find("a").each(function(){ $(this).unbind('mouseover').unbind("mouseout"); $(this).removeClass("active clicking"); }); myThis.addClass("active clicking"); return false; });

    Read the article

  • Using jQuery's ajax get request with parameters, returning page content

    - by Stevie Jenowski
    Thank you for looking at my question, as I appreciate your time. Okay, so I'm trying to use jQuery's get function to call my php script which ultimately returns a variable which is a built template of the main content of my page minus my static header/footer, for which I would like to replace the "old" page content without the page reloading. Can anyone point me in the right direction as to where I'm going wrong here? My code is as follows... jQuery: function getData(time, type) { $.ajax({ type: "GET", url: "getData.php", data: "time=" + time + "&type=" + type, success: function(data){ $('#pageContent').fadeOut("slow"); $('#pageContent').html(data); $('#pageContent').fadeIn("slow"); } }); return false; } getData.php(paraphrased): .... $time = empty($_GET['time']) ? '' : $_GET['time']; $type = empty($_GET['type']) ? '' : $_GET['type']; echo getData($time, $type); function getData($time, $type) ...... ..... $tmpl = new Template(); $tmpl->time= $time; $tmpl->type = $type; $builtpage = $tmpl->build('index.tmpl'); return $builtpage; ..... ...... jQuery function call: <a href="#" onclick="getData("<?php print $tmpl->time; ?>", "Orange")">Orange</a> <a href="#" onclick="getData("<?php print $tmpl->time; ?>", "Apple")">Apple</a> <a href="#" onclick="getData("<?php print $tmpl->time; ?>", "Banana")">Banana</a> When I click any link, the ajax seems to run fine, and the page does refuse to reload, but the content still remains unchanged... Anyone happen to know what's up?

    Read the article

  • Passing Data of WebView to Another Activity

    - by meygraph
    I've designed a training program and Html texts and image put into training. I want to address my html file by an activity to sent another activity. This is MainActivity /* * ListView item click listener. So we'll have the do stuff on click of * our ListItem */ listViewArticles.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view, int position, long id) { switch (position) { case 0: Intent newActivity0 = new Intent(TrickPage.this,a_Dotted_Lines.class); startActivity(newActivity0); break; case 1: Intent newActivity1 = new Intent(TrickPage.this,TutorialsPage.class); startActivity(newActivity1); break; case 2: Intent newActivity2 = new Intent(TrickPage.this,TutorialsPage.class); startActivity(newActivity2); break; case 3: Intent newActivity3 = new Intent(TrickPage.this,TutorialsPage.class); startActivity(newActivity3); break; default: // Nothing do! } and this SecondActivity (show WebView) public class a_Dotted_Lines extends Activity { private WebView webView; @SuppressLint("SetJavaScriptEnabled") @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.a_dotted_lines); // Button HOME ImageButton ImageButton_home = (ImageButton) findViewById(R.id.ImageButton_home); ImageButton_home.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(); intent.setClass(a_Dotted_Lines.this, Main.class); startActivity(intent); overridePendingTransition(R.anim.fadein, R.anim.fadeout); } }); //Button Previous ImageButton ImageButton_previus = (ImageButton) findViewById(R.id.ImageButton_previus); ImageButton_previus.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //Closing SecondScreen Activity finish(); } }); webView = (WebView) findViewById(R.id.webview_compontent); webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl("file:///android_asset/html/article.htm"); } } I want Send "file:///android_asset/html/article.htm" or other addres from MainActivity Is it possible? Sorry My English is not good

    Read the article

  • Why the vertical scroll bar moves automatically ?

    - by Misha Moroshko
    I don't understand why the vertical scroll bar moves automatically to the most top position when "Line 9" clicked, for example. Further clicks does not move the scroll bar. Could anyone explain why, and how to fix this ? I work with Firefox 3.6.3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <body> <div> <table> <tr row='0'><td class='column1'>Line 0</td></tr> <tr row='1'><td class='column1'>Line 1</td></tr> <tr row='2'><td class='column1'>Line 2</td></tr> <tr row='3'><td class='column1'>Line 3</td></tr> <tr row='4'><td class='column1'>Line 4</td></tr> <tr row='5'><td class='column1'>Line 5</td></tr> <tr row='6'><td class='column1'>Line 6</td></tr> <tr row='7'><td class='column1'>Line 7</td></tr> <tr row='8'><td class='column1'>Line 8</td></tr> <tr row='9'><td class='column1'>Line 9</td></tr> </table> </div> </body> $(document).ready(function() { $(".column1").each(function(index) { $(this).after("<td class='column2'>Details " + index + "</td>"); $(this).toggle(function() { $("[row='" + index + "'] .column2").fadeIn("fast") }, function() { $("[row='" + index + "'] .column2").fadeOut("fast") }); }); }); div { overflow: auto; height: 100px; width: 300px; border: 1px solid blue; } .column1 { cursor: pointer; } .column2 { display: none; }

    Read the article

  • Elements added with appendTo() not immediately available

    - by Zip Gun Jim
    I'm having a problem with elements added with appendTo() not being immediately available in the DOM. First, I'm reading some data from a JSON file and then appending some html to a div. jsonUrl = "js/performers.json"; $.getJSON(jsonUrl, function(json) { $.each(json.performers, function(i, performer) { var html = '<div class="performer_mini">'; html += '<img src="' + performer.thumbnail + '" alt="' + performer.name + '" /><br />'; html += performer.name + '<br /></div>'; $(html).appendTo("div#performer_spotlight"); }); }); Then I'm calling a random shuffler plugin to show one of the added divs at a time. $("#performer_spotlight").randomShuffler(".performer_mini", 3000, 3000, 9000); The random shuffler does the following: (function($) { $.fn.randomShuffler = function(shuffledElements, fadeInTime, fadeOutTime, timeout) { fadeInTime = fadeInTime || 3000; fadeOutTime = fadeOutTime || 3000; timeout = timeout || 9000; $(shuffledElements).hide(); var $old_element; var $new_element; var old_index = 0; var new_index = 0; function shuffleElement() { $old_element = $new_element; old_index = new_index; while ($(shuffledElements).length > 0 && old_index == new_index) { // don't display the same element twice in a row new_index = Math.floor(Math.random()*$(shuffledElements).length); } $new_element = $(shuffledElements + ":eq(" + new_index + ")"); if ($old_element != undefined) { $old_element.fadeOut(fadeOutTime, function() { $new_element.fadeIn(fadeInTime); }); } else { $new_element.fadeIn(fadeInTime); } setTimeout(shuffleElement, timeout); } $(this).show(); shuffleElement(); } })(jQuery); The first time the shuffleElement() function is called $(shuffledElements).length equals 0, so no element is displayed. On the next call to shuffleElement(), the elements added with appendTo() are available and one is selected at random as expected. Everything works correctly after that. Is there some way to refresh the DOM or make these elements available to jQuery immediately after I add them with appendTo()? Any other suggestions for how to accomplish this?

    Read the article

  • Jquery - Loading a page with .load and selector doesn't execute script?

    - by PirateKitten
    I'm trying to load one page into another using the .load() method. This loaded page contains a script that I want to execute when it has finished loading. I've put together a barebones example to demonstrate: Index.html: <html> <head> <title>Jquery Test</title> <script type="text/javascript" src="script/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#nav a').click(function() { $('#contentHolder').load('content.html #toLoad', '', function() {}); return false; }); }); </script> </head> <body> <div id="nav"> <a href="content.html">Click me!</a> </div> <hr /> <div id="contentHolder"> Content loaded will go here </div> </body> </html> Content.html: <div id="toLoad"> This content is from content.html <div id="contentDiv"> This should fade away. </div> <script type="text/javascript"> $('#contentDiv').fadeOut('slow', function() {} ); </script> </div> When the link is clicked, the content should load and the second paragraph should fade away. However it doesn't execute. If I stick a simple alert("") in the script of content.html it doesn't execute either. However, if I do away with the #toLoad selector in the .load() call, it works fine. I am not sure why this is, as the block is clearly in the scope of the #toLoad div. I don't want to avoid using the selector, as in reality the content.html will be a full HTML page, and I'll only want a select part out of it. Any ideas? If the script from content.html was in the .load() callback, it works fine, however I obviously don't want that logic contained within index.html. I could possibly have the callback use .getScript() to load "content.html.js" afterwards and have the logic in there, that seems to work? I'd prefer to keep the script in content.html, if possible, so that it executes fine when loaded normally too. In fact, I might do this anyway, but I would like to know why the above doesn't work.

    Read the article

  • Why doesn't the .click() not work in this instance?

    - by Deshiknaves
    Basically what this does is fadeIn pre-existing divs and then loads an image. When the image is loaded it then appends that into one of the pre-existing divs. Then it appends a new div with an id of xButton. Then later it $('#xButton').click() should hide the 3 divs. However it just doesn't work. If I change the click() to either #modalImage or #overlay, it works but just not for the #xButton. I would really like to figure out why its not working and how I should be doing this instead. Thanks. $(function(){ $('#container a').click(function(e){ e.preventDefault(); var id = $(this).attr('href'), img = new Image(); $('#overlay').fadeIn(function(){ $('#modalImage').fadeIn(); }); $(img).load(function(){ $(this).hide(); $('#modalImage').removeClass('loader').append(this); $(this).fadeIn(function(){ var ih = $(this).outerHeight(), iw = $(this).outerWidth(), newH = ($(window).height()/10)*7, newW = ($(window).width()/10)*7; if (ih >= iw && ih >= newH) { $(this).css('height',newH + 'px'); $(this).css('width', 'auto'); } else if (ih >= iw && newH > ih) { $(this).css('height', ih + 'px'); $(this).css('width', 'auto'); } else if (iw > ih && iw >= newW) { if ((newW / (iw / ih)) > newH) { $(this).css('width', 'auto'); $(this).css('height', newH + 'px'); } else { $(this).css('width', newW + 'px'); $(this).css('height', 'auto'); } } else { $(this).css('width', iw + 'px'); $(this).css('height', 'auto'); } var padW = ($(window).width() - $(this).outerWidth()) / 2, padH = ($(window).height() - $(this).outerHeight()) / 2; console.log (padH + ' ' + padW); $(this).css('top', padH); $(this).css('left', padW); if($('#overlay').is(":visible") == true) { ih = ih + 4; $('<div id="xButton">x</div>').appendTo('#modalImage'); if (padH >= 0) { $('#xButton').css('top', padH - 4).css('right', padW - 65); } else { $('#xButton').css('top', '20px').css('right', padW - 65); } } }); }).attr('src', id); }); $('#xButton').click(function(){ $(this).hide(); $('#overlay').fadeOut(function(){ $('#modalImage img').css('top', '-9999px').remove(); $('#xButton').remove(); $('#modalImage').addClass('loader'); }); }); });

    Read the article

  • How to close a jquery dialog box when a submit button is clicked(Submit button is residing inside the dialog box)

    - by user1268313
    i have struts2 form inside a jquery dialog box, when i submit my form inside that dialog box my Struts2 action is performing but that pop up jquery dialog box is not closing. How can i close that dialog box when![enter image description here][1] i submit my form? <table> <tr> <td> <td align="center" > <sj:head jqueryui="true" jquerytheme="cupertino" /> <sj:dialog id="mybuttondialog" autoOpen="false" showEffect="fadeIn" hideEffect="fadeOut" modal="true" title="Rename" > <s:form action="EditDayActionUserTemplate" id="formId323"> <table style="height:48px;width: 100%;" cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="2" align="center"> <input type="hidden" name="dayId" value="<%=daycont%>"/> <input type="hidden" name="workoutId" value="<%=trid%>"/> </td> </tr> <tr> <td width="50%" align="right"><font size="6px">Date</font></td> <td width="50%"> <sj:datepicker id="datghfe4" name="date" value="%{#parameters['date']}" label="Select Date" appendText=" (dd.MM.yy)" displayFormat="dd.M.yy"/></td> </tr> <tr> <td>&nbsp;</td> <td align="right"><sj:submit formIds="formId323" id="sdfdss3" button="true" value="Rename" targets="rightmiddiv"></sj:submit></td> </tr> </table> </s:form> </sj:dialog> <sj:submit openDialog="mybuttondialog" value="Rename" button="true" /> </td> </tr> </table>

    Read the article

  • JSON image viewer not working in firefox

    - by jarga
    I have tried to find out why JSON is not working in Firefox all over this forum and the internet. It works on tablets, ie, safari. It works on my desktop in firefox. It only does not work after uploading I've tried a few things (commented out), such as mimeType with no solution. I have tried using the $.ajax with no better luck. Firefox had no javascript errors. I'm using jQuery 1.7. Console.log is printing out the data. $(document).ready(function(){ jQuery.support.cors = true; //$.ajaxSetup({ mimeType: "application/json" }); /*$.ajaxSetup({ scriptCharset: "utf-8" , contentType: "application/json; charset=utf-8"}); */ // loading pictures $.getJSON("intro.json?format=json", function(data){ var links = ''; var imageload = ''; var title = ''; console.log(data) $.each(data, function(key, item){ links += ' <a href=' + item.image + '>' + key + '</a>'; imageload += '<img src="' + item.image + ' " />'; title += item.alt; }); $('.introCon').html(imageload); $('.introCon img').hide(); $('.introCon img:last').fadeIn(500); $('.introCon img').fadeIn(1000); rotatePics(2); }); }); function rotatePics(currentPhoto) { var numberOfPhotos = $('.introCon img').length; currentPhoto = currentPhoto % numberOfPhotos; $('.introCon img').eq(currentPhoto).fadeOut( function() { // re-order the z-index $('.introCon img').each(function(i) { $(this).css( 'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos ); }); $(this).show(); setTimeout(function() {rotatePics(++currentPhoto);}, 3000); }); } Here is the simple JSON from a separate file. { "1" : { "image" : "portfolio/chrpic.png", "alt" : "Blah.", "detail": "Quartz"}, "2" : { "image" : "portfolio/mysspic.png", "alt" : "Landing page.", "detail": "Container"}, "3" : { "image" : "portfolio/decode-pic3.png", "alt" : "Decode this.", "detail": "Landing page 2"}, "4" : { "image" : "portfolio/simple-think-pic.png", "alt" : "Simple Think", "detail": "simpilify your life"} }

    Read the article

< Previous Page | 9 10 11 12 13 14 15  | Next Page >