Search Results

Search found 10226 results on 410 pages for 'width'.

Page 338/410 | < Previous Page | 334 335 336 337 338 339 340 341 342 343 344 345  | Next Page >

  • How do i make a allocation table?

    - by david
    I have build a grid of div's as playground for some visual experiments. In order to use that grid, i need to know the x and y coordinates of each div. That's why i want to create a table with the X and Y position of each div. X:0 & Y:0 = div:eq(0), X:0 Y:1 = div:eq(1), X:0 Y:2 = div:eq(2), X:0 Y:3 = div:eq(3), X:1 Y:0 = div:eq(4) etc.. What is the best way to do a table like that? Creating a OBJECT like this: { 00: 0, 01: 1, 02: 2, etc.. } or is it better to create a array? position[0][0] = 0 the thing is i need to use the table in multiple way's.. for example the user clicked the div nb: 13 what are the coordinates of this div or what is the eq of the div x: 12 y: 5. Thats how i do it right now: var row = 0 var col = 0 var eq = 0 c.find('div').each(function(i){ // c = $('div#stage') if (i !=0 && $(this).offset().top != $(this).prev().offset().top){ row++ col = 0 } $(this).attr({'row': row, 'col': col }) col++ }) I think it would be faster to build a table with the coordinates, instead of adding them as attr or data to the DOM. but i cant figure out how to do this technically. How would you solve this problem width JS / jQuery?

    Read the article

  • Resize my Google Map API

    - by Jeremy Flaugher
    I am new to JS, and have found the answer to a previous question, which brought up a new question, which brought me here again. I have a Reveal Modal that contains a Google Map API. When a button is clicked, the Reveal Modal pops up, and displays the Google Map. My problem is that only a third of the map is displaying. This is because a resize trigger needs to be implemented. My question is how do I implement the google.maps.event.trigger(map, 'resize')? Where do I place this little snippet of code? The Reveal Model script: <script type="text/javascript"> $(document).ready(function() { $('#myModal1').click(function() { $('#myModal').reveal(); }); }); </script> My Google Map Script: <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(39.739318, -89.266507), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); } </script> The div which holds the Google Map: <div id="myModal" class="reveal-modal large"> <h2>How to get here</h2> <div id="map_canvas" style="width:600px; height:300px;"></div> <a class="close-reveal-modal">&#215;</a> </div>

    Read the article

  • CSS: Is it possible to get a div that is 100% height, less a top and bottom margin?

    - by Cheeso
    I can get a 100% height div, like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>T5</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> * { padding: 0; margin: 0; } html, body { height: 100%; } body { font-family: "lucida sans", verdana, arial, helvetica, sans-serif; font-size: 75%; } h1 { font-size: 1.4em; padding: 10px 10px 0; } p { padding: 0 10px 1em; } #container { min-height: 100%; background-color: #DDD; border-left: 2px solid #666; border-right: 2px solid #666; width: 280px; margin: 0 auto; } * html #container { height: 100%; }</style> </head> <body> <div id="container"> <h1>100% Height Div</h1> <p>Lorem...</p> <p>Ut ...</p> </div> </body> </html> But is it possible to get a div with a height of "almost 100%" height? If I want margins at the top and bottom, can I do that? Margins as indicated here:

    Read the article

  • Inconsistent height of text input elements between Firefox and WebKit

    - by Trevor Burnham
    OK, I realize that this is something of an eternal question, but here goes: I've got a single text input, <input type="text" name="whatever" /> and I've specified its font-family, font-size and padding. Yet, even on the same machine (my Mac, let's say), the input has a different height in Firefox (3.6) than it does in Chrome or Safari. Specifically, Firefox adds a little bit more padding below the text. And no, specifying height in pixels doesn't achieve consistency either. Is there any way to achieve text input height consistency across Gecko- and WebKit-based browsers (let alone IE and Opera) without resorting to JavaScript? And if I must use JavaScript, has someone already devised a jQuery plugin or something to easily do this? Update: Here's what not to do. The jqTransform plugin lets you skin form elements and promises that they'll look the same across browsers. Here's how the demo input looks in Chrome 5 on my Mac: and here's how the same input looks in Firefox 3.6.4: I haven't altered these screenshots in any way, just cropped them. Now, my first reaction is, "Ugh, I don't want to support Firefox." But there are currently more Firefox users than Safari and Chrome users combined, so that's not an option. Someone, please help! I just want my forms to look the same across modern, standards-compliant browsers! And by "look the same," I'm not talking about the outline on selection or anything like that; I'm just talking about having the same width, height, and text placement!

    Read the article

  • ASP.NET MVC View ReRenders Part of Itself

    - by Jason
    In all my years of .NET programming I have not run across a bug as weird as this one. I discovered the problem because some elements on the page were getting double-bound by jQuery. After some (ridiculous) debugging, I finally discovered that once the view is completely done rendering itself and all its children partial views, it goes back to an arbitrary yet consistent location and re-renders itself. I have been pulling my hair out about this for two days now and I simply cannot get it to render itself only once! For lack of any better debugging idea, I've painstakingly added logging tracers throughout the HTML just so I can pin down what may be causing this. For instance, this code ($log just logs to the console): ... <script type="text/javascript">var x = 0; $log('1');</script> <div id="new-ad-form"> <script type="text/javascript">x++;$log('1.5', x);</script> ... will yield ... <--- this happens before this snippet 1 1.5 1 ... 10 <--- bottom of my form, after snippet 1.5 2 <--- beginning of part that runs again! ... 9 <--- this happens after this snippet I've searched my codebase high and low, but there is NOTHING that says that it should re-render part of a page. I'm wondering if the jQueryUI has anything to do with it, as #new-ad-form is the container for a jQueryUI dialog box. If this is potentially the case, here's my init code for that: $('#new-ad-form').dialog({ autoOpen: false, modal: true, width: 470, title: 'Create A New Ad', position: ['center', 35], close: AdEditor.reset });

    Read the article

  • XSL-FO: Static content AND Flow content in Region-Body: Possible?

    - by Peterdk
    I have the following problem: I need to use XSLFO to generate a 2-column multipage document. Problem is: I need to have a vertical line between the 2 columns. Since XSLFO does not seem to specify a option for creating such a divider, I need to manually put it there. I was thinking of using a static rotated blockcontainer with a leader in it. However, it looks like it's not possible to use static-content on the same region as where the flow content comes. <fo:layout-master-set> <fo:simple-page-master page-width="170mm" page-height="222mm" master-name="page" > <fo:region-body region-name="xsl-region-body" margin-top="2mm" margin-bottom="2mm" margin-left="10mm" margin-right="10mm" column-count="2" column-gap="5mm" /> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="page"> <fo:static-content flow-name="xsl-region-body" ><!-- This gives a error --> <fo:block>test</fo:block> </fo:static-content> <fo:flow flow-name="xsl-region-body"> <xsl:apply-templates/> </fo:flow> </fo:page-sequence> Results in (XEP): [error] Duplicate identifier: flow-name="xsl-region-body". Property 'flow-name' should be unique within 'fo:page-sequence'. Are there any methods to place static content on the main region when also flow content is placed there? Or: Is there a way to define the divider that divides a 2-column layout?

    Read the article

  • Preserving SCRIPT tags (and more) in CKEditor

    - by Jonathan Sampson
    Update: I'm thinking the solution to this problem is in CKEDITOR.config.protectedSource(), but my regular-expression experience is proving to be too juvenile to handle this issue. How would I go about exempting all tags that contain the 'preserved' class from being touched by CKEditor? Is it possible to create a block of code within the CKEditor that will not be touched by the editor itself, and will be maintained in its intended-state until explicitly changed by the user? I've been attempting to input javascript variables (bound in script tags) and a flash movie following, but CKEditor continues to rewrite my pasted code/markup, and in doing so breaking my code. I'm working with the following setup: <script type="text/javascript"> var editor = CKEDITOR.replace("content", { height : "500px", width : "680px", resize_maxWidth : "680px", resize_minWidth : "680px", toolbar : [ ['Source','-','Save','Preview'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['Image','Table','HorizontalRule','SpecialChar'] ] }); CKFinder.SetupCKEditor( editor, "<?php print url::base(); ?>assets/ckfinder" ); </script> UPDATE: I suppose the most ideal solution would be to preserve the contents of any tag that contains class="preserve" enabling much more than the limited exclusives.

    Read the article

  • position of options in HTML select element

    - by frenchie
    I have a element that contains options. The element is 150px wide but some of the options are wider. So when rendering, the browser shows the overflow to the right. How can I make the options list overflow to the left? JSFiddle Thanks. <select id="MySelect"> <option value="60" selected="selected"></option><option value="-60">(UTC-01:00) Azores</option> <option value="-60">(UTC-01:00) Cape Verde Is.</option><option value="0">(UTC) Casablanca</option> <option value="0">(UTC) Dublin, Edinburgh, Lisbon, London</option><option value="0">(UTC) Monrovia, Reykjavik</option> <option value="60">(UTC+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option> <option value="60">(UTC+01:00) Brussels, Copenhagen, Madrid, Paris</option> <option value="60">(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb</option> <option value="60">(UTC+01:00) West Central Africa</option> <option value="120">(UTC+01:00) Windhoek</option> </select>?????????????????????????????????????????????? ?#MySelect{ margin-top:20px; margin-left:200px; width:150px;}

    Read the article

  • Align col in a bootstrap collapsable menu

    - by Grimm
    I got my hands on bootstrap recently and I'm still discovering it. I made collapsable menu from a tutorial online but now that I want to had an image on each entry of my menu that I wasn't expecting. I want my image to be always aligned to the text in the menu but it still getting on top of it. I tried to remove row and col tag and forget about the responsiveness of my menu but it still doesn't work... Here is the source code of my menu: <div id="menu" class="menu nav-collapse collapse width"> <div class="collapse-inner"> <div class="navbar navbar-inverse"> <div class="menu_titlenav nav-tabs nav-stacked"> <h3>Menu</h3> </div> </div> <div class="row well menu_entry"> <div class="span2 search_ico_ina"></div> <div class="span9 search_ent_ina">Recherche</div> </div> <div class="row well menu_entry" > <div class="span2 pro_ico_ina"></div> <div class="span9 pro_ent_ina">Espace PRO</div> </div> <div class="row well menu_entry"> <div class="span2 account_ico_ina"></div> <div class="span9 account_ent_ina">Mon Compte</div> </div> </div> </div> and the entire source: http://jsfiddle.net/Grimtork/JLFMW/

    Read the article

  • Jquery if statement help

    - by mtwallet
    Hi. I want to know how to correctly write an if statement with jquery. I have a bunch of div's with an anchor in each that when clicked expands the the div's width using toggleClass. This works fine but I want to write an if statement that checks to see if the other div's have the same class applied, if so contract that div, then expand the next div (hope that makes sense), my code so far: HTML: <div class="content-block"> <h2>Title</h2> <p>Content...</p> <a class="expand" href="#">Expand View</a> </div> <div class="content-block"> <h2>Title</h2> <p>Content...</p> <a class="expand" href="#">Expand View</a> </div> <div class="content-block"> <h2>Title</h2> <p>Content...</p> <a class="expand" href="#">Expand View</a> </div> <div class="content-block"> <h2>Title</h2> <p>Content...</p> <a class="expand" href="#">Expand View</a> </div> JQUERY: $(document).ready(function(){ $('a.expand').click(function(){ $(this).parent('.content-block').toggleClass('wide'); }); });

    Read the article

  • Nothing gets displayed when debugging Microsoft Surface

    - by leftend
    I am trying to write my first Microsoft Surface application, and am doing the development on the Surface unit itself. I successfully re-created the quick "Photos" application that is shown on the PDC Video, however, now that I'm trying to create my own app - nothing actually shows up when I run it. I'm mainly just adding ScatterViews right now - and they show up fine in the designer, but as soon as I hit F5 - the shell is shown on the surface - but none of the ScatterViews show up. Here's my xaml code so far. Am I missing something?? <s:SurfaceWindow x:Class="SurfaceUITreeDemo.TreeDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="http://schemas.microsoft.com/surface/2008" Title="WYITT Tree Demo" AllowsTransparency="False" Background="Beige"> <s:SurfaceWindow.Resources> <ImageBrush x:Key="WindowBackground" Stretch="None" Opacity="0.6" ImageSource="pack://application:,,,/Resources/TreeDemoBackground.jpg"/> </s:SurfaceWindow.Resources> <Grid Background="{StaticResource WindowBackground}" > <s:ScatterView Name="test"> <Image Source="C:\dev\Network-Alt-icon.png"/> </s:ScatterView> <s:ScatterView Height="100" Margin="456,160,348,0" Name="scatterView1" VerticalAlignment="Top" Background="Black"> <s:ScatterViewItem Height="100" Width="150"> <Image Source="C:\dev\Network-Alt-icon.png"/> </s:ScatterViewItem> <s:ScatterViewItem></s:ScatterViewItem> ScatterView </s:ScatterView> </Grid> </s:SurfaceWindow>

    Read the article

  • Wordpress display featured posts outside of loop

    - by Thomas
    Im new to WP and Im not real sure how to work with the loop. I am trying to display featured posts in the sidebar with this code: <?php query_posts('cat=5'); $url = get_permalink(); while(have_posts()){ the_post(); $image_tag = wp_get_post_image('return_html=true'); $resized_img = getphpthumburl($image_tag,'h=168&w=168&zc=1'); $title = $post->post_title; echo "<ul class='left_featured'>"; echo "<li><a href='"; echo $url; echo "'><img src='$resized_img' width='168' height='168' "; echo "'/></a></li>"; echo "<li><a href='"; echo $url; echo "'/>"; echo $title; echo "</a></li></ul>"; echo ""; }; ?> This gives me all sorts of crazy outputs, text from random posts, images, etc...Its supposed to output a list of images and titles for all of the posts in a certain category. Any help would be really appreciated. Oh yeah, I am using a plugin that resizes images on the fly, thats what the the wp_get_post_image/getphpthumburl business is.

    Read the article

  • asp.net: saving js file with c# commands...

    - by ile
    <head runat="server"> <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title> <link href="../../Content/css/layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/Areas/CMS/Content/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="/Areas/CMS/Content/js/jquery.jeditable.js"></script> <script type="text/javascript" src="/Areas/CMS/Content/js/jeditable.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".naslov_vijesti").editable('<%=Url.Action("UpdateSettings","Article") %>', { submit: 'ok', submitdata: {field: "Title"}, cancel: 'cancel', cssclass: 'editable', width: '99%', placeholder: 'emtpy', indicator: "<img src='../../Content/img/indicator.gif'/>" }); }); </script> </head> This is head tag of site.master file. I would like to remove this multiline part from head and place it in jeditable.js file, which is now empty. If I do copy/paste, then <% %> part won't be executed. In PHP I would save js file as jeditable.js.php and server would compile code that is in <?php ?> tag. Any ideas how to solve this problem? Thanks in advance, Ile

    Read the article

  • Show hide DIVs : jQuery

    - by Muhammad Sajid
    Hi, I have two links & I want to show / hide them one at a time, my code is : <!DOCTYPE html> <html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // we will add our javascript code here $(document).ready(function() { $(function(){ $('#link').click(function(){ $('#colorDiv').slideToggle('slow'); return false; }); }); }); </script> <meta charset=utf-8 /> <title>JS Bin</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> #dv { width:100px; height:100px; border:1px solid; } </style> </head> <body> <table cellspacing="2"> <tr><td><a href="#" id="link">Color</a></td><td><a href="#" id="link">Car</a></td></tr> <tr><td><div id="colorDiv">Red</div></td><td><div id="carDiv">PRADO</div></td></tr> </table> </body> </html> by default first div should me shown. hanks.

    Read the article

  • jquery ui dialog and our dearest friend, ie6

    - by bradjive
    I'm using the jquery ui dialog for a modal popup dialog. It's working great in Firefox/Chrome but terrible in ie6. Problem: When I show the dialog in ie6, the browser window grows and automatically scrolls down to the bottom. The height increase and automatic scroll-down is equal to the height of the jquery dialog. I can scroll up and then use the dialog as normal, but the behavior where it grows the window and drops is maddeningly unacceptable. Here is how I'm launching the window: <div id="dialogWindow"></div> ... $(document).ready(function() { var $dialog = $("#dialogWindow").dialog({ autoOpen: false, modal: true, minWidth: 560, width: 560, resizable: "true", position: "top" }); $('.addButton').click(function(e) { e.preventDefault(); $('#dialogWindow').load('http://myurl'); $dialog.dialog('open'); }); }); I am already using the bgiframe plugin for jquery which is key for ie6 overlay issues. But this seems unrelated to that. Has anyone seen this before and found a work around?

    Read the article

  • Having trouble plugging jQuery FullCalendar into Squarespace page

    - by ellenchristine
    When I test the fullcalendar widget locally, it works fine. However, when I try to integrate it with Squarespace, it doesn't show up. Here is what is in my head tag: <link rel='stylesheet' type='text/css' href='storage/scripts/fullcalendar.css' /> <script type='text/javascript' src='storage/scripts/jquery.js'></script> <script type='text/javascript' src='storage/scripts/fullcalendar.js'></script> <script type='text/javascript'> $(document).ready(function() { // page is now ready, initialize the calendar... $('#calendar').fullCalendar({ aspectRatio:2 }) }); </script> I have this in my body tag: <div id="calendar" style="width:500px; height:330px; background-color:#CCCCCC;"></div> The div displays but the calendar doesn't appear at all. I can't figure out why this isn't working! The calendar should definitely fit in the div space (at least it does locally). I've used jQuery with Squarespace before, and I don't see where my error is.

    Read the article

  • Separating Javascript functions

    - by msharma
    I am wondering how javascripts get included in a jsp - can we put any code which the jsp will recognize and not just javascript code only in the .js file? I have some common javascript code which needs to get executed on different pages, so I decided to place it in its own separate .js file and include it on all jsps which call that function. The js function now refers to a key from a properties file and some other non-javascript code: function openPrivacyStmntWindow(){ var url = <h:outputText escape="false" value="\"#{urls.url_privacyStatement}\";" /> newwindow=window.open(url,'Terms','height=600,width=800,left=300,top=100,scrollbars=1'); newwindow.focus(); return false; } This function worked just fine when it was included in the jsp itself. Now that I have separated it into its own file it doesnt, do I need to include the properties bundle in this file. The value="\"#{urls.url_privacyStatement}\";" is referring to a bundle called "urls" which has a key called "url_privacyStatement" Also in Line 1 var url = <h:outputText escape="false" value="\"#{urls.url_privacyStatement}\";" /> the <h:outputText escape="false" ... /> will it cause any issues? Thanks.

    Read the article

  • Why is Chrome miscalculating jQuery submenu dimensions?

    - by chunkymonkey
    I'm trying to implement this dropdown menu with flyouts: http://jsfiddle.net/chunkymonkey/fr6x4/ In Chrome certain categories can be expanded to show their subcategories while others show nothing when opened up. For example: Alternative Rock can be expanded to show its multiple subcategories . . . BUT . . . World Music, which has as many subcategories, shows no subcategories when expanded. (SCREENSHOT: http://i.imgur.com/0WorR.jpg) I thought I had tracked this problem down to a problem with they way the dimensions of the dropdown elements are calculated in the original code: First change: - var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * 180; + var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * container.width(); Second change: Remove: var checkMenuHeight = function(el) { if (el.height() > options.maxHeight) { el.addClass('fg-menu-scroll') }; el.css({ height: options.maxHeight }); }; Add: var checkMenuHeight = function(el) { var max_height = options.maxHeight - breadcrumb.getTotalHeight(); if (el.height() > max_height) { el.addClass('fg-menu-scroll'); el.height(max_height); topList.height(max_height); } else { if (topList.height() < el.height()) { topList.height(el.height()); } } }; But it's still not working only on Chrome (version 8, Windows & Mac) (not sure why Chrome is different).

    Read the article

  • Get the character count of a textarea including newlines

    - by styfle
    I tested this code in Chrome and there seems to be a bug involving the newlines. I am reaching the maxlength before I actually use all the characters. <textarea id="myText" maxlength="200" style="width:70%;height:200px"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... Enter something: </textarea> <div> Char Count <span id="count"></span>/<span id="max"></span> </div>? <script> var ta = document.getElementById('myText'); document.getElementById('max').innerHTML = ta.maxLength; setInterval(function() { document.getElementById('count').innerHTML = ta.value.length; }, 250);? </script> How can I accurately get the char count of a textarea? jsFiddle demo: http://jsfiddle.net/Qw6vz/1/

    Read the article

  • Google Maps inside custom PODS page

    - by Sharath
    I have a custom pods page called addstory.php which uses a public form to display some input fields. For one of the fields, i have a input helper that displays a google map location which I can use to pick out a location which is stored in comma separated variable. Here is the input helper code... <div class="form pick <?php echo $location; ?>"> <div id="map" style="width:500; height:500"> </div> <script type="text/javascript"> $(function() { map=new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(77.595062,13.043359),6); map.setUIToDefault(); GEvent.addListener(map,"click",function(overlay,latlng) { map.clearOverlays(); var marker = new GMarker(latlng); map.addOverlay(marker); //Extra stuff here.. } ); }); </script> </div> And this is the code inside my addstory.php <?php get_header(); $rw = new Pod('rainwater'); $fields=array( 'name', 'email', 'location'=>array('input_helper'=>'gmap_location'), ); echo $rw->publicForm($fields); ?> I get the following error...and the google map doesn't load. a is null error source line: [Break on this error] function Qd(a){for(var b;b=a.firstChild;){Rg(b);a.removeChild(b)}}

    Read the article

  • jQuery ajax delete script not actually deleting.

    - by werm
    I have a little personal webapp that I'm working on. I have a link that, when clicked, is supposed to make an ajax call to a php that is supposed to delete that info from a database. For some unknown reason, it won't actually delete the row from the database. I've tried everything I know, but still nothing. I'm sure it's something incredibly easy... Here are the scripts involved. Database output: $sql = "SELECT * FROM bookmark_app"; foreach ($dbh->query($sql) as $row) { echo '<div class="box" id="',$row['id'],'"><img src="images/avatar.jpg" width="75" height="75" border="0" class="avatar"/> <div class="text"><a href="',$row['url'],'">',$row['title'],'</a><br/> </div> /*** Click to delete ***/ <a href="?delete=',$row['id'],'" class="delete">x</a></div> <div class="clear"></div>'; } $dbh = null; Ajax script: $(document).ready(function() { $("a.delete").click(function(){ var element = $(this); var noteid = element.attr("id"); var info = 'id=' + noteid; $.ajax({ type: "GET", url: "includes/delete.php", data: info, success: function(){ element.parent().eq(0).fadeOut("slow"); } }); return false; }); }); Delete code: include('connect.php'); //delete.php?id=IdOfPost if($_GET['id']){ $id = $_GET['id']; //Delete the record of the post $delete = mysql_query("DELETE FROM `db` WHERE `id` = '$id'"); //Redirect the user header("Location:xxxx.php"); }

    Read the article

  • RUN FUNCTION AFTER SOMETIME IN JQUERY & AUTOMATIC SLICING OF IMAGES

    - by user2697032
    I am not being able to start the automatic slicing of images, it is happening only after a click, how should i modify my code so that i get to change the slicing of the images automatically. <!DOCTYPE html> <html lang="en"> <head> <title>Slicebox - 3D Image Slider</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Slicebox - 3D Image Slider with Fallback" /> <meta name="keywords" content="jquery, css3, 3d, webkit, fallback, slider, css3, 3d transforms, slices, rotate, box, automatic" /> <meta name="author" content="Pedro Botelho for Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/slicebox.css" /> <link rel="stylesheet" type="text/css" href="css/custom.css" /> <script type="text/javascript" src="js/modernizr.custom.46884.js"></script> </head> <body onload="funct()"> <div class="container"> <div class="codrops-top clearfix"> <a href="http://tympanus.net/Development/AutomaticImageMontage/"><span>&laquo; Previous Demo: </span>Automatic Image Montage</a> <span class="right"> <a target="_blank" href="http://www.flickr.com/photos/strupler/">Images by <strong>ND Strupler</strong></a> <a href="http://tympanus.net/codrops/?p=5657"><strong>Back to the Codrops Article</strong></a> </span> </div> <h1>Slicebox <span>A fresh 3D image slider with graceful fallback</span></h1> <div class="more"> <ul id="sb-examples"> <li>More examples:</li> <li class="selected"><a href="index.html">Example 1</a></li> <li><a href="index2.html">Example 2</a></li> <li><a href="index3.html">Example 3</a></li> <li><a href="index4.html">Example 4</a></li> </ul> </div> <div class="wrapper" id="checkthis"> <ul id="sb-slider" class="sb-slider"> <li> <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/1.jpg" alt="image1"/></a> <div class="sb-description"> <h3>Creative Lifesaver</h3> </div> </li> <li> <a href="http://www.flickr.com/photos/strupler/2968268187" target="_blank"><img src="images/2.jpg" alt="image2"/></a> <div class="sb-description"> <h3>Honest Entertainer</h3> </div> </li> <li> <a href="http://www.flickr.com/photos/strupler/2968114825" target="_blank"><img src="images/3.jpg" alt="image1"/></a> <div class="sb-description"> <h3>Brave Astronaut</h3> </div> </li> <li> <a href="http://www.flickr.com/photos/strupler/2968122059" target="_blank"><img src="images/4.jpg" alt="image1"/></a> <div class="sb-description"> <h3>Affectionate Decision Maker</h3> </div> </li> <li> <a href="http://www.flickr.com/photos/strupler/2969119944" target="_blank"><img src="images/5.jpg" alt="image1"/></a> <div class="sb-description"> <h3>Faithful Investor</h3> </div> </li> <li> <a href="http://www.flickr.com/photos/strupler/2968126177" target="_blank"><img src="images/6.jpg" alt="image1"/></a> <div class="sb-description"> <h3>Groundbreaking Artist</h3> </div> </li> <li> <a href="http://www.flickr.com/photos/strupler/2968945158" target="_blank"><img src="images/7.jpg" alt="image1"/></a> <div class="sb-description"> <h3>Selfless Philantropist</h3> </div> </li> </ul> <div id="shadow" class="shadow"></div> <div id="nav-arrows" class="nav-arrows"> <a href="#x">Next</a> <a href="#y">Previous</a> </div> <div id="nav-dots" class="nav-dots"> <span class="nav-dot-current"></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div><!-- /wrapper --> <p class="info"><strong>Example 1:</strong> Default settings</p> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.slicebox.js"></script> <script type="text/javascript"> $(function() { var Page = (function() { var $navArrows = $( '#nav-arrows' ).hide(), $navDots = $( '#nav-dots' ).hide(), $nav = $navDots.children( 'span' ), $shadow = $( '#shadow' ).hide(), slicebox = $( '#sb-slider' ).slicebox( { onReady : function() { $navArrows.show(); $navDots.show(); $shadow.show(); }, onBeforeChange : function( pos ) { $nav.removeClass( 'nav-dot-current' ); $nav.eq( pos ).addClass( 'nav-dot-current' ); } } ), init = function() { initEvents(); }, initEvents = function() { // add navigation events $navArrows.children( ':first' ).on( 'click', function() { setInterval("callme()", 1000); return false; } ); //$(function(){ //callme(); //}); function callme(){ //$('#checkit').append("callme loaded<br />"); slicebox.next(); setInterval("callme()", 1000); } $navArrows.children( ':last' ).on( 'click', function() { slicebox.previous(); return false; } ); $nav.each( function( i ) { $( this ).on( 'click', function( event ) { var $dot = $( this ); if( !slicebox.isActive() ) { $nav.removeClass( 'nav-dot-current' ); $dot.addClass( 'nav-dot-current' ); } slicebox.jump( i + 1 ); return false; } ); } ); }; return { init : init }; })(); Page.init(); }); </script> <script> // make sure the "myContainer" id in the script is the same id of the div $(document).ready(function() { slicebox.next(); $('#nav-arrows').sbslider(); // this is the piece of code that will do the magic thing }); </script> </body> </html> I am not being able to start the automatic slicing of images, it is happening only after a click, how should i modify my code so that i get to change the slicing of the images automatically.

    Read the article

  • Sliding doors HTML buttons in Safari Win

    - by RyanP13
    Hi, I have the following HTML for buttons implementing sliding doors technique that look fine in everything but Safari on Windows: <button type="submit"> <span>Button</span> </button> This is the corresponding CSS: button { background:url("../images/sprBgBtn.png") no-repeat right -47px; border:0; cursor:pointer; font-weight:bold; height:27px; line-height:27px; overflow:visible; padding:0 26px 0 0; position:relative; text-align:center; text-transform:uppercase; width:auto; } button::-moz-focus-inner { border: none; /* overrides extra padding in Firefox */ padding:0; } button span { background:url("../images/sprBgBtn.png") no-repeat left top; display:block; height:27px; line-height:27px; padding:0 0 0 26px; position:relative; white-space:nowrap; } If i omit the following code then the same issue will appear in FFOX: button::-moz-focus-inner { border: none; /* overrides extra padding in Firefox */ padding:0; }

    Read the article

  • jQuery.post() issues with passing data to jQuery UI

    - by solefald
    Hello, I am trying to get jQuery.post() to run my php script and then open a jQuery UI dialog with the data that php script returns. Its supposed to come back as a form with a table and a textarea in it. It works great with alert(data); and i get a pop-up with all my data. The problem starts if i turn off alert(). Now it opens 2 dialogs. One containing only the table, without textarea, and the second one absolutely empty. What am i doing wrong here? How come all my data shows up in the alert(), but not in dialog? What do i need to do to fix it? Oh, and do i need to also include $.ajax() before the $.post()? Thank you. $.post("/path/to/script.php", { id: this.id, value: value }, function(data){ // THIS WORKS //alert(data); // THIS DOES NOT WORK $(data).dialog({ autoOpen: true, width: 400, modal: true, position: 'center', resizable: false, draggable: true, title: 'Pending Changes' }); } );

    Read the article

  • DataGrid Column names don't seem to be binding

    - by Jason
    Sort of a Flex newbie here so bear with me. I've got a DataGrid defined as follows: <mx:Script> ... private function getColumns(names:ArrayCollection):Array { var ret:Array = new Array(); for each (var name:String in names) { var column:DataGridColumn = new DataGridColumn(name); ret.push(column); } return ret; } </mx:Script> <mx:DataGrid id="grid" width="100%" height="100%" paddingTop="0" columns="{getColumns(_dataSetLoader.columnNames)}" horizontalScrollPolicy="auto" labelFunction="labelFunction" dataProvider="{_dataSetLoader.data}" /> ...where _dataSetLoader is an instance of an object that looks like: [Bindable] public class DataSetLoader extends EventDispatcher { ... private var _data:ArrayCollection = new ArrayCollection(); private var _columnNames:ArrayCollection = new ArrayCollection(); ... public function reset():void { _status = NOTLOADED; _data.removeAll(); _columnNames.removeAll(); } ... When reset() is called on the dataSetLoader instance, the DataGrid empties the data in the cells, as expected, but leaves the column names, even though reset() calls _columnNames.removeAll(). Shouldn't the change in the collection trigger a change in the DataGrid?

    Read the article

< Previous Page | 334 335 336 337 338 339 340 341 342 343 344 345  | Next Page >