image slideshow
hi everybody I need a a bit of help here. I need to build a slideshow and I think jquery could be good tool I could use. I have been looking on the web for some simple ones but I just can not find anything that look similar to what I need. everything I can find is way too complex. I have attached a template of what I need and a bit of help would be appreciated. The blue area is where my picture should appear. On top of the picture is a layer with a previous, next button and the image number in my
div position
hi how can use jQuery codes like comments place in api.jquery.com? I mean which code can use when a div increased height, other div change position place (eg. footer)?
Stranger behavior with serialize and object literals
i! i'm having a strange issue. my code: GEvent.addListener(map, 'infowindowbeforeclose', function() { var form1 = $('#window_form_tab1').serialize(); var name = form1.name_field; alert(form1); //save(marker, $('#window_form_tab1').serialize()); }); and this is the form: ''+ '<div id=\'window_div1\' style=\'width: 300px; height: 300px; \'>'+ ' <form
How to generate a radio button or a checkbox depends on the selected value in dropdownlist
for example, i have a dropdownlist <select id="Type"> <option>Single</option> <option>Mutiple</option> </select> when i select Single, i want to generate 2 radio button. instead, generating 2 checkboxes if Mutiple was selected. can anyone show me how to do it?
Simulate :active state?
Straight to the point: I have an absolute positioned element that with a top value of 130px. I also have the following .css code: .element:active {top: 131px} This makes the element move one pixel down when clicked, simulating a button click. Now, besides clicking this element with the mouse, the user can also use the keyboard. I've managed this with the following code: $j(".element").click(); When the user presses the corresponding key, the above code executes. It works wonders and the click function
append, appendto and remove
I have a whole bunch of divs that are loaded into container field ".containter". They are all drag-gable. When i add a new div with "append", it adds the new div at the bottom all the other divs. Then if i close one of the divs inside the the .container div with the "remove()" function, each of the remaining divs move up the exact amount the .remove() div height was. This causes the divs to appear outside the .container div. I want each and every new div "append"-ed to the .container to appear in
How to load external forms and pages (html) using jQuery and PHP. The behavior I want as follows...
I'm using PHP for my web project. The web pages I have created contains TABS control using jQuery. The TAB CONTENT has some FORMS, TABLES and TEXT etc.. The BEHAVIOR I want to achieve such that, after user entered data to a form (and after successful validation), data in that form should passed to some PHP pages and based on the results TAB CONTENT (the same tab) should be loaded with NEW FORMS and TABLES etc... (this is somewhat similar to a 'shopping cart', BUT my project is NOT such a Shopping
Help with implementing a click and hold function
Hello all, I have a grid of items that when clicked lead to a new page. I would like to implement a function so that if a user clicks on an item and holds for at least 1000ms, a menu will be shown next to the item and they will not be taken to the next page. However, all of my current attempts either lead to the menu not being shown, or it is shown and the user is redirected to the next page anyways. Here's my current code: jQuery(document).ready(function(){ var mousehold; jQuery('.item').mousedown(function(){
How to refresh css changes for the hover effect?
I have an anchored list of items that when hovered over will add a background and change the color, giving it a highlight effect by toggling a class. Something like this: $("#theme li a").hover(function(){ $(this).addClass('hoverHighlight'); }, function(){ $(this).removeClass('hoverHighlight'); }); When I press one of the anchor items, it runs a function that changes a bunch of css values across the page, including the values of the 'hoverHighlight' class. The thing
Loading content(parent) and changing div width(child) after document.ready / .click
I've spent all day trying to figure this out, but have only gotten so far. At first I wanted to load some content to a parent div, and have it's child resize accordingly after the according link was clicked. After failing for a few hours, I decided to try doing it at the start of the script, but yet again, the resize does not seem to be working. I have ran out of ideas. Help would be strongly appreciated. I've tried various things, but nothing helped, so I rolled back my code to with what I started
Gallery with sub images
Hi to all I am very new to jquery and trying to create gallery very similar to http://tugbucket.net/tests/gallery/index.html basically i need gallery with thumbnails and when main image will be displayed i need to have few more sub-images available, can someone point me to some good example which will be quite easy to implement. Many thanks,
$.extend() "deep" property not working
I have two objects that I am trying to merge together using $.extend(). As long as I only use objects 1 level deep everything merges correctly. objOne = { face: "book", captain: "crunch" } objTwo = { face: "space", foo: "bar" } newObj = $.extend(true, objOne, objTwo); correctly becomes: newObj = { face: "space", captain: "crunch", foo: "bar" } The problem is when I try to use a nested value. objOne = { face: "book", cereal: { captain:
calling a function within the jQuery ready function from another javascript file
I have 2 javascript files: 1 containing generic functions for my site used sitewide and another for a particular web page containing just the javascript for that page. The page is also calling the jQuery javascript file. What I want to do is have a javascript function in my main javascript file which uses features of jQuery such as show, hide etc. and then I want to call this javascript function from the other page specific javascript file. i.e. my main javascript functions file contains: $(document).ready(function(){
1.4.2: "$(function() {}" not working any more?
Hello, till version 1.4.1 this code was executed: $(function() { alert("I am ready"); }); ... instead of using this longer one: $(document).ready(function(){ alert("I am ready."); }); Now in 1.4.2 the shorter one does'nt work any more. But why? I can't find a hint in the changelog. Carlos
Text animate between colors
Hi everyone, I am trying to get regular text in div "newslink" to pulse back & forth between two different colors- hopefully infinitely, if possible. Here's the code: <script type="text/javascript"> $j(function() { $j('#newslink').animate({ color: "black" }, 500);, function() { $j('#newslink').animate({ color: "red" }, 500); }; }); </script> Can someone help me fix this code? Thanks, Bill
Running Multiple Functions on Form Submit
Hi, I am new to jQuery. I want to use two different jQuery functions when a form submit button is pressed. I would like to run a form validation function, and if it validates fine, I want to use an ajax submission where it sends the form data and then hides the form showing the word "Sent". Running each function separately, I can get either to work. But trying to figure out how to run one and IF TRUE run the next one I can't figure out. Validate Function $("#contactForm").validate({ success: "valid",
Does .html() function return only "static" code?
I have a question about the jquery .html() function. Here is a sample code ... <div id="testHtmlFunction"> <input name="userName" id="userName" value="Sunil" /> </div> So when I call something like $("#testHtmlFunction").html(), then it returns me the following <input name="userName" id="userName" value="Sunil" /> which is correct and expected. So everything is fine and dandy till now. Now, let's say the user has change the input field text from "Sunil" to "Changed". So I will expect the same html()
not working in ie
Hi all, I've the following code $("#show").dialog({ open:function() { $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").remove(); $(this).dialog('option', 'position', [500,100] ); }, autoOpen: false, width: 600, modal: false, buttons: { "sluiten": function() { $(this).dialog('close');
animate the size of an image
hi folks! im searching for a short explenation for handling image animation regarding this situation: $('img).animate({ width: "106px", height: "153px" }, 1500 );when i use this code the image is blowing up from the left top corner to the size i declared in the animate function. but im searching for a animation out of the middle of the current size to the declared one. so it shoulndt blow up from top left ..more it should blow up to all corners at same time. can someone show me an example
Event after file download complete?
Scenario: I have a html page with a link to a php page that creates a pdf that is downloaded to the users computer with the header: header("Content-Type: application/pdf"); header("Content-Disposition: attachment; filename="file.pdf"); etc When I click the link on the first page I have a message (modal) showing "Generating pdf...". However I can't find a way to have this message/modal disappear after the file has been downloaded. Any input appreciated.
no page refresh and no getting to submitpage please.... but how
All I need is a MySQL update by pressing the submit button. The user sould't get on the php site by pressing the Submitbutton and when it's possible there should't be a page refresh by pressing the submit button. The jquery.form.js plugin also didn't work that way. my js: <!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" xml:lang="de-de" lang="de-de" > <head> <meta http-equiv="content-type"
Problem: Receiving empty answer using AJAX and Oauth (Twitter)
Hi, I'm using jQuery's AJAX to interact with Twitter. I'm trying to implement, at first, the authentication through oauth. So, I'm using Oauth JavaScript library (from Google Code) to build data to be sent, and then using jQuery's AJAX to send it. In the very first step, I send the requesition for token: var urltw = "http://twitter.com/oauth/request_token"; var datasend = null; var accessor = { consumerKey: "my_key_here", consumerSecret: "my_secret_here" }; var message = { action: urltw, method:
Sortable - Crash - JavaScript Inside Portlet
Hi, When I place JavaScript code that outputs some content inside a Sortable Portlet and drag it, Firefox and Safari re-loads a blank page with just the JavaScript output. Are there any known issues about placing JavaScript inside Sortable, Draggabe or Droppable DIVS? Thanks, James
ajax load null problem
I am loading html that is generated from a php controller model. It is all working great other than there is a weird null being printed on the bottom of the html. I made sure that it is definitely the ajax load printing the null on the bottom. I am new to jquery and cannot figure this out. What is causing this? Here is my functions: function load_messages() { $('#messageajax').load("dashboard/get_messages",function(){}); } $(function() { $('#dialog').dialog({ autoOpen:
JQuery is not working if we use in both Master and Content pages.
Hi, We are trying to use the jQuery in both master page and Content page, but it is not working. It is working fine if we use it either in Master Page or Content Page,but not in both. My code is Master Page Code ================= <head runat="server"> <title>Untitled Page</title> <SCRIPT type="text/javascript" src="scripts/ui/jquery.js"></SCRIPT> <SCRIPT type="text/javascript" src="scripts/ui/jquery.layout.js"></ SCRIPT> </head> <body> <form id="form1" runat="server"> <DIV class="ui-layout-center">
How make an Interactive Table?
Hi. I would like to have an interactive table - that means that I would like to have table with option of editing it with <input>. Something like that: <table border="1"> <tr> <td>1234</td><td>2345</td> </tr> </table> And when I will click on the text inside the table I would like to have option of editing it. How do that? I tried somthing like that but it doesn't work properly: $('td').html('<input value=' + $('td').text() + '>'); $('input','td').blur(function() { $('td').text($('td').val());
Problem with .ajax with 1.4.2
Hello i have something like that main.php <script>mian.js</script> ------------------- mian.js $.ajax({ type: "POST", url: "file.php", data: "id_field="+ usr, dataType: "json", success: function(data){ $("#other1").val(data.o1); $("#other2").val(data.o2); } }); ------------------- file.php ..........
How to navigate to a URL on an empty link click
I am writing an MVC ASP.NET based website, and I want to create a ActionLink that deletes the current entity. For search engine reasons, I don't want this link to be able to be followed (else all my data is gone!), unless a user, via jQuery, confirms the action. For the confirmation, I can use something like: [html] <a href="" id="delete">Delete this entity</a> [js] $( function() { $('#delete').click(function() { return confirm('Confirm Delete?'); }); }); but I am not sure how to follow
A DOM-thing problem I guess
Ok, In order to explain the problem, first I'm going to describe the situation: I'm collaborating in a project involving cakephp doing the front-end. We have a view that is composed by a search section and a table to show the matches of the search. At first, the view shows in the table all the items, well, it only shows 15 items due to pagination, that's the default view and the one that is loaded in the DOM. The table uses this plugin called "tablesorter" to apply styles and sorting, it has an
sortable list breaks TinyMCE
Hey, i am using the jquery code: $("#blocklist").sortable({ handle : '.handle', update : function () { } }); to make my <li> elements sortable.. works fine, except they have <textarea>s inside of them... i have used the basic (non jquery) tinyMCE initialisation on every textarea, ... when i sort the elements.. the very one i DRAG makes it's child textareas uneditable.. is there a way to refresh the tinyMCE? or what is the best solution? many thanks for your time.
Want hover effect in image gallery that is setup with Fancybox plugin
I have Fancybox running fine and the gallery thumbnails themselves are styled using standard CSS external file with something like: #gallery img { border: 1px #ccc solid; background-color: #FCFCFC; padding: 2px; } What I want is for the border and background to change on hover. So, I wrote an extended function of the existing Fancybox function to try and 'toggle' the class. Here's what I have, but it doesn't work: $("a[rel=gallery]").fancybox({ 'transitionIn' :
Image gallery problem
Hi, I have a row of thumbnails. When the user clicks a thumb, an image fades in. When the user clicks the thumb again, it disappears. The problem is, when the user clicks a different thumb, the first enlargement is still open. How can I get it so whenever a user clicks a thumb, any open image fades out/ goes away? Thanks!
Check if checkbox in an iframe is selected
How can i check (from the parent) if a checkbox in an iframe is checked. Would this work? $("#iframe").contents().find("input:checkbox").click(function() {
$(document).ready(function() doesn't work
Hello I am new with jquery and have created my first script but I am figuring out why my first script doesn't work. Need some help . <script > $(document).ready(function(){ $('#main').mouseover(function(){ $('#logo').fadeOut('slow'); }); }); </script> <div id="main"class="main"> <ul id="logo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula massa, volutpat nec faucibus sed, volutpat nec tortor. Nulla facilisi. Praesent consequat dolor neque. Nam consequat gravida nunc auctor
Getting the background changed using an array
My pseudo code looks something like this: <div id="column1"> <ul class="list"> <li id="123"><a href="void">hover me or click me 1</li> <li id="456"><a href="void">hover me or click me 2</li> <li id="789"><a href="void">hover me or click me 3</li> </ul> </div> <div id="column2" style="background:url('images/someimage.jpg);"> <div id="123">look at me 1</div> <div id="456">look at me 2</div> <div id="789">look at me 3</div> </div> basically I am having a hard time coming up with
I'm to stupid for using $.ajax
the html: <div><form action="" method="post"><input id="submit" name="ubernehmen" onclick="register()" style="width:auto; color:#000;" type="submit" value="Daten übernehmen" /></form></div> the js: function register(){ $.ajax({ type: "POST", url: "ubergabe.php", success: function() { $('#msg').html("test"); } }); } the php (ubergabe.php): <?php $link = mysql_connect('localhost', '*****', '*****'); if (!$link) { die('keine Verbindung möglich: ' . mysql_error()); } echo 'Verbindung erfolgreich'; /*
Jquery draggable not working in chrome/safari
I have created a page that uses ajax calls to load product images. The jquery code for drag, drop and clone would not work when in the index.php page so I moved it to the page that gets called to request the products as each product has drag, drop code created for it. Works fine in FF, even IE but not in Safari or Chrome. Below is the jquery code in load_products.php that gets created when the ajax call is made to load the products. http://tandyleatherfactory.net/ Anyone have any idea why wouldn't
Youtube video not to show related videos at end.
I have this code below that when you click on the image it opens the youtube video and it looks great and it validates html but...............I would like to not shoe the related videos that show up after it's complete. I would just like to show the replay message only. Any Ideas anyone? <a rel="prettyPhoto" href="http://www.youtube.com/watch?v=GOGwoOFudJY"><img src="http://waterworks-lamson.com/wordpress/wp-content/uploads/basic.jpg" alt="Waterworks Lamson Presents" width="220" height="100" align="left"
Variables undefined in IE works fine FF
The script runs fine in firefox. In internet explorer when the loop runs for the first time, it sets the variables properly but the following times through the loop, my productId and variantId variables are undefined. Any ideas whats going on here? Pulling my hair out. $(document).ready(function() { var size = []; var productId = []; var variantId = []; $('#outfitMainImage').append('<img id="outfitMainImage1" src="images/outfits/outfit'+outfitId+'/0.jpg"
.html() Not Working in IE 8!
Hi All, I'm having problems with some jQuery code on this page: http://outlookimages.co.uk/new/options.php?product=UGhvdG8gQ2FudmFz Several .get() calls fire on this page when a user selects a size. When the calls complete they use $(table_id).html(html_produced_from_call) to fill the table rows. This works fine in FireFox 3.6 and Safari 5 however only the first of the 4 cells in each row shows in IE 8. Can anyone tell me why this is happening? Thanks!
Next Page