How to make simple script that opens box with bio and image?
I want to make script that opens box with big image and short bio, when user click on small photo. Perfect example is this page .What is the easiest way to achieve this simple effect? Thanks in advance.
jQuery UI namespace and CSS prefix
I'm developing a plugin and I would like to use "uitw" namespace for plugins and "uitw-" prefix for CSS classes. Is this acceptable in light of this recommendation? The ui namespace is reserved for official jQuery UI plugins. When building your own plugins, you should create your own namespace. Source: http://learn.jquery.com/plugins/stateful-plugins-with-widget-factory/
Jquery-Fade Images
<HTML> <head> <link href="style.css" type"text/css" rel = "stylesheet"> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> function Myimage() { $(".image #1").show("fade",500); } </script> </head> <body onload="Myimage();"> <div class="image"> <img id="1" src="b.jpg" border="0" width="100px" height="150px"> <img id="2" src="e.jpg" border="0" width="100px" height="150px"> <img id="3" src="f.jpg" border="0" width="100px" height="150px"> </div> </body> </html>
Selection <tr>
Sorry, I think that this is the right forum. Hi to everybody, I am using jquery datatable for the management of a big table with many columns and rows. When I scroll the table with the mouse, it changes the background color for the entire <tr> and is restored when I move the mouse in the other row of the table. All this thanks to the implementation of a class. The problem is that not the whole row is highlighted, but only a part of it. You can see a demo linking here: http://tegattiweb.altervista.org/registro/provaData.php
hove function doesn't work for append div
Hi im new to jQuery .. I am having a problem in append function in my program. initially im having some div's in the page and hover function is working fine for that but when i append same div to page using jquery the newly added div is showing but the hover is not working for it.. please help me
Unslider Plugin is switching the images randomly and not sequentially
Im using unslider for a slidershow with many images. I followed the documentation here: unslider This plugin shows the dots with number of images we have, and looking for this dots, I saw the images alternating randonmly, and the speed is also randomly. Somebody there already used this plugin and had the same problem? Below, there is my jQuery to start unslider plugin: $(function() { $('.banner').unslider({ speed: 3000, delay: 5000, fluid: true, dots: true,
Table sorter plugin not firing for dynamically added rows
HI, I have a html table, in which the rows are created dynamically. There is no "thead" in table. I am trying to use the table sorter plugin for the pagination alone. However, I am not sure what is missed, as clicking on items in pager do not work. Also the pagintation itself is not getting done. Below is the code used: <script type="text/javascript" src="/Scripts/jquery-1.8.2.js"></script> <script type="text/javascript" src="/Scripts/test1.js"></script> <script type="text/javascript" src="/Scripts/jquery.tablesorter.min.js"></script>
Issue on Adding Class to Element which already Had same Class
I am trying to add an animation class to on div by using at This Demo following code and repeating the result on each time click as: $(document).ready(function(){ $("#1").on("click",function(){ $('#layer1').addClass('animated fadeInLeft'); // $('#layer1').removeClass('animated fadeInLeft'); }); $("#2").on("click",function(){ $('#layer1').addClass('animated fadeInLeft'); }); });but it it seems the process is happeining only one time and I am not able to add the classes animated
Elements alignment in form
Hello Guys, I am beginner, so please bear with me!! The question is on form element. I am creating a form which contains input fields and select menus. But the elements are not in a proper alignment. Example, input fields are coming in a proper alignment, where as the select menus are in a different alignment. I want the all the text input boxes along with select menus come in the same alignment. Please find the code below. <form method="post" action="demoform.asp"> <div class="ui-field-contain">
setInterval problem
Hello all, I am still new at jQuery so here is a thing that didn't get. Why am I getting different results when the time out is more than a second, try 60 seconds (60000) and above ?? It wouldn't stop / clear the fading function right away. what is the logic or the behavier of setInterval function() ??? I am confused with this bug all day. Here is the sample code : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"
How to keep the submit text from showing with jQuery Mobile
I'm working on a website that has a submit button and forms and such. On this website I'm using jQuery Mobile, but to keep its stylesheet from interfering I'm using some jQuery. This is my jQuery to keep jQuery Mobile's stylesheet from interfering (I call it Normalize.js): $(document).on('pagebeforeshow', 'html', function() { $('body').removeClass('ui-mobile-viewport'); $('body').removeClass('ui-overlay-viewport'); $('div').removeClass('ui-page-theme-a'); $('div').removeClass('ui-btn');
Panel buttons not styled.
Hi, I am having trouble with my buttons looking like simple anchors in my side panel. The panel markup is placed before the div 'data-role="header": business.html <div id="infopanel" data-role="panel" data-position="right" data-display="overlay" data-theme="a"> <!-- panel content goes here --> <h3 id="panel_heading"></h3> <p id="panel_description"></p> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button">Map</a> <a href="#" data-role="button">Coupon</a>
ReG:Error: Syntax error, unrecognized expression: http://some.serve.com/image-tn.png
Hi ya, I am using jquery 1.10.2 minified version (which is coming from struts jquery plugin) recently we have upgraded from lower version to jquery 1.10.2 we noticed some weird behaviour of image tags . I am using an ajax call to retrieve image urls (these were hosted on a hosting server) and dynamically adding to the page . $.ajax({ type: "GET", url: "retrieveImages.action", data: "design.id="+$('#designTemplateVersionId').val(),
how to divide a page into parts?
As I can split a jquery mobile page to make a menu like this:
HTML content returned from jQuery.ajax not parsing as HTML
I'm using a coldfusion cfsavecontent tag in a cfc to generate a block of html. This cfc is called from jQuery.ajax. The success block is this function: ,success: function(response) { jQuery("#divDataDisplay").html(response); [other unrelated code here] } The content that displays on the page due to the success block includes html tags as plain text - not rendered as html. The closest closed ticket I found was http://forum.jquery.com/topic/display-the-result-of-jquery-ajax-call-as-html-string-and-not-plain-string
JQuery Mobile: Scroll effect transition to same page anchors
Slight novice here, so please bear with me! I am using this technique to link to anchors within the same JQuery Mobile page: http://dev4theweb.blogspot.ie/2012/07/anchor-links-and-jquery-mobile.html and it works. What I cannot get working are any of the solutions out there for smooth scrolling to these anchor tags. Has anybody figured this out? Thanks.
Object doesn't support property or method 'jstree'
Hi, I'm new to jquery and I'm been trying to learn by jumping head first into a few simple projects that I need for work. I'm working on a simple MVC project where I would like to present a file system and some files to the end user. It's pretty simple concept. So using NuGet I downloaded and installed jquery 1.9.1 and jstree 3.0. I created a simple page and controller and added the reference to both jquery and jstree, created a simple ready method on a div object, and when it hits that line it
Hover Function Not Working On Rapael.js Objects From an Array
Using Raphael.js 2.1.0 I am trying to create circle objects on the Canvas from an array of coordinates by using this code: var map = Raphael('canvas', 500, 500); var coords = [ [150,50], [20,85], [350,95] ]; var circle; for(var i = 0; i < coords.length; i++){ circle = map.circle(coords[i][0], coords[i][1], 20); circle.toFront(); circle.attr({ fill: '#98ED00', translation: "4,4", stroke: '#FFF', 'stroke-width': 4, opacity: 1, }); } circle.hover( function ()
Combine results from two separate REST Calls
Hi all, I am using $.ajax to output REST data that is similar in structure across two data sources. I will be placing the data in a table. I was thinking of just appending the data from the 1st then the 2nd source. Is there any value to merge these, and if so, how would I do it? Thanks! Kelly
Help with animating a child element
Hi all I have the following HTML of links: <ul class="maingrid"> <li><aside class="slidebox left">Test One</aside><img src="/images/image.jpg"></li> <li><aside class="slidebox right">Test Two</aside><img src="/images/image.jpg"></li> <li><aside class="slidebox top">Test Three</aside><img src="/images/image.jpg"></li> <li><aside class="slidebox bottom">Test Four</aside><img src="/images/image.jpg"></li> <li><aside class="slidebox right">Test Five</aside><img src="/images/image.jpg"></li>
Deferred execution order
When creating a new Deferred object, if I attach handlers in the following order: var x = $.Deferred(); x.done(function () { console.log('done 1'); }); x.always(function () { console.log('always 1'); }); x.done(function () { console.log('done 2'); }); x.always(function () { console.log('always 2'); }); x.resolve(); I get the following output: done 1 always 1 done 2 always 2 Is this a bug? Why don't all of the 'done' functions fire before the 'always' functions? Why are they intermingled? Thanks!
How to use JQuery Custom validation method to validate phone number
I wanted to validate a phone number using jQuery custom validation method.I tried to write a method for that but it didn't work .Can anyone help me to find the error of this code .As I'm new to this language I don't know much about jQuery. here is my code $(document).ready(function () { jQuery.validator.addMethod('phonenu', function(value, element) { if(element.value != 10 && element.value == isNaN) { return false; } else { return true; }, 'Invalid phone
select and desappear
Hello every body i am the newbie in java script I want to do this homework: cinema's reservation I have a page like this: page_1.html [CODE] <!DOCTYPE html> <html> <body> <h2>how many tickets do you want? </h2> <form action = "page_2.html"> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <input type="submit"> </form> </select> </body> </html> [/CODE] page_2.html [CODE] <!DOCTYPE
center a ul in a div
Hi, It is a silly question but I am not able to solve this issue. I have a ul list in a div , in the <li> I am putting images with a float left. (see attach). The issue is I cannot center the list in the middle of the div, i have always the gap on the right. I think it is beacause of the float:left but how can i do? <div data-role="content" style="padding:0px;margin-left:0%"> <ul id="Gallery" style="margin:0;padding:0;height:50%;"> <!--class="gallery" --> <li style="list-style: none;padding: 0;
Share - Public panel for multiple pages
Hi friends, I'm almost new to jquery mobile,and i got a little issues with my pages and their panel: I have a right panel inside a page looks like <div data-role="page" id="home" class="ui-responsive-panel"> <div data-role="panel" data-position="right" data-position-fixed="false" data-display="reveal" id="my-right-panel" data-theme="b"></div> </div>and the panel show up when swipeleft event fires. Later I add another panel <div data-role="page" id="pageAbout"></div>Because the right panel is
Using JQM Flip Toggle Switch for submitting two different status informations
I like to use a jQuery mobile flip toggle switch to submit two status informations to control the two status of a relais. Instead of using: <input class="scene_btn" type="submit" onClick="request('key=1')" value="on" data-theme="d"</input> <input class="scene_btn" type="submit" onClick="request('key=2')" value="off" data-theme="d"</input> I'd like to use a JQM flip toggle switch, to switch on and off a relais. <form> <label for="flip-1">Flip toggle switch:</label> <select name="flip-1" id="flip-1"
Related Info + Cascading Dropdowns
Hi we started having problems with the jQuery since this morning. The SharePoint 2010' forms that had being using JS and JQuery stopped working… Any thoughts? Thanks
Simulate Hover on Mobile Device
Hi folks, I am using jQuery for my drop down menus on a website. When the mouse hovers over an ul the li items appear and drop down. Everything works fine. However when I view the site on a mobile device then a problem arises. there is no hover event. Below is the jQuery code I am using: <script type="text/javascript"> $(document).ready(function(){ $("#nav-one li").hover( function(){ $("ul", this).fadeIn(800); }, function() { } ); if (document.all) { $("#nav-one li").hoverClass ("sfHover");
Syntax error in code with 1.11.1 update, worked with 1.10.2
So as of version1.11.1 this string of code no longer works and throws an error. This is the error - Error: Syntax error, unrecognized expression: #rsmn_vehicle_make option[value=]. How could I change this to work with the latest version? $("#rsmn_vehicle_model option[value='<?php if(isset($qinfo['model'])){echo stripslashes($qinfo['model']);} ?>']").attr('selected','selected');
Creating Pager for dynamic html table
Hi, I have a div element to which i am adding a html table with rows. There is no table header and footer. Jsfiddle: http://jsfiddle.net/KCJ4s/ I would like to add pager to the html table with the options of "First","Next", Numbers, "Last", "Previous". How to create a pager for the dynamically created table. I have tried with datatables.net pager, but the paging is not shown. Jsfiddle for datatables.net pager: http://jsfiddle.net/Nh9AQ/ How to create paging for dynamic created table? Thanks
Changing the format of the datepicker.
Hi I'm really a nube to this, so please bear with me. I am using this datepicker that I got on this site. I would like to change the format of the date to mm-yyyy I also would like to know how can I get the date and use it in a href on my site. Ex: replace the 05-2014 with the date from the datepicker? Thanks. <li><a href="http://apmtl067/storage/reportData/ddgraphs/ORA_space_05-2014.svg" target="content" class="underline">Oracle</a></li> <!doctype html> <html lang="en"> <head> <meta charset="utf-8">
Using JQM Flip Toggle Switch for submitting two different status informations
I like to use a jQuery mobile flip toggle switch to submit two status informations to control the two status of a relais. Instead of using: <input class="scene_btn" type="submit" onClick="request('key=1')" value="on" data-theme="d"</input> <input class="scene_btn" type="submit" onClick="request('key=2')" value="off" data-theme="d"</input> I'd like to use a JQM flip toggle switch, to switch on and off a relais. <form> <label for="flip-1">Flip toggle switch:</label> <select name="flip-1" id="flip-1"
Tablesorter
After upgrade from tablesorter 2.10.8 to latest 2.16.4, I get extra margin in the top of first row content. Anyone knows how to fix it? FYI, it is fine in other tables if filter is not applied. My second problem, as you can seen the screen cap below, even I set the width for the table, but the table size is still over-sized. I think this may be caused by the column data which is a long string, e.g. email address, that cannot be shown in multi-line. Any solution? Thanks for reading and your help is
How do I choose the initial date without selecting a date with the datepicker?
I am allowing only certain dates to be selected by the datepicker calendar. When the page first loads, I want the calendar to be showing my first available date. I tried initializing the datepicker with the defaultDate set to my date. This shows the date like I want, but it also selects it. How can I show the date on the calendar without selecting or highlighting it?
Clickes Counter issue with fadeout.
Hello, I have been strugling with this for the last 6 hours. Any help. there is some thing wrong with it but I don't know what is it, it works but not every time. Here is the code sample : <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script> $(document).ready(function(){ var clicked = false; var missedclicked = 0; setInterval(function(){ clicked = false; $("p").fadeIn(3000, function() { // Animation
Sortable Widget - “Sortable” but not drag-able items.
Done some digging and have reached the point where I need fresh eyes on this. I have 2 connected sortable divs( #sortable1, #sortable2). Any number of items populated in #sortable2 on page load need to be accessible to / included in the “toArray” method, but they, the items populated on-load, can not be moved/draggable. In essence, preventing them from being dragged to #sortable1. The items populated in #sortable1, need to behave “normally” when dragged to #sortable2 and / or back. So far the closest
Issue on Jquery Background Image Fade In and Out
I am trying to change a background image of a html5 canvas from dropdown select by using following code $('select').on('change', function() { if (this.value ==1){ $('#canvas').css('background-image').fadeOut(); $('#canvas').css({'background':'url(http://localhost/MapBox/img/cal_NAs.png) no-repeat top right,url(http://localhost/MapBox/img/bg_sh.png) no-repeat top right','background-color' : 'grey'}).fadeIn(); } }) but this is not doing the job and I am getting this error on console : Uncaught TypeError:
jQuery secure connection
I have been searching around but haven't quite found my answer. If I use jQuery on my mobile app and connect to an api/page to verify a login, is this secure, can anyone intercept the data? I have been reading things on encrypting the data that is being passed to my server and creating token keys being passed back and forth but if someone can see the data transfer it would be easy to post data to my PHP script right? Any help would be much appreciated. example below: $.ajax({ type: "POST",
How can I check the url outside of frame?
Hi guys, I'm trying to manipulate my content with jquery based on the URL. The script works as it should on desktop. But I'm having a problem with mobile app or mobile site, it doesn't capture the correct URL because the content is in iFrame. The problem is that the iFrame doesn't contain the content I'm after... Any one can advice the way I could make it work? Here is what I'm talking about: Example This is the script I'm executing: jQuery(document).ready(function(){ if (document.URL.indexOf("ebay.co.uk")
switching mp3 on secondary hover?
happy mondays all - wondering if there are any jquery heads on here that can help me out with something. i have some script in a page that triggers an audio clip when an area/image/text is moused over/clicked etc.... does anyone know how i can swap between two audio clips on a second, third rollover - or rather swap between the two triggerings. so on initial mouse over it plays 1.mp3 then when it is moused over again it plays 2.mp3... here is the script that is above the head... <script type='text/javascript'>//<![CDATA[
Next Page