Want to update text in <p> element
Hello, I am a JQuery newbie. I have been trying to perform a simple task of updating the text in <p> element after the page loads. Here is a very simple script and code I am using <!DOCTYPE html> <html> <head> <style> p { color : blue; margin : 8px; } </style> <script src = "jquery-1.10.1.min.js"></script> </script> <title>My JQuery Tests </title> </head> <body> <p> My JQuery Tests On This Page </p> <script
create a simple popup box
Today i will show you how to create a simple popup box with close button, no need 3th-party plugins, just one file html and jquery library. <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>jQuery Popup Box Demo</title> <script src="jquery-1.9.0.min.js"></script> <script> $(document).ready(function(){ $('h1').click(function(){ //you click into h1 $('.hiddenbox').fadeIn(); //show popup box $('div:not(".hiddenbox")').hide(); //hide all elements except class hiddenbox $('.hiddenbox').appendTo('body');
load & unload
i can load pages using "load" and is it poosbile to unload this pages (any command like unload) likewise css file for example $("#l5").bind('click',function(){ $('#irtibat').load('contact.html');how can i unload this page $("head").append("<link>"); var css = $("head").children(":last"); css.attr({ rel: "stylesheet", type: "text/css", href: "main.css" }); how can i unload this css file
UI - Dialog - Close button out of place
The close button on my site has the X moved out of place. Do you guys think this may be an interference with the CMSs' stylesheets or something? After copying the code to a blank site the problem disappeared. So the question seems to be: how to move that thing back to it's place? I'm looking through the css styles atm but nothing manages to move it even a bit eh... I know the paragraphs aren't needed but the WYSIWIG editor on the site inserts them automaticially, also they don't break anything in
Jquery Validate Plugin
Hi , I am using Jquery-validate plugin for form validation,now i getting error messgae on after the each input field, I wand to show all error message in group format,if any options are there? otherwise any otherway's ? Thanks & Regards Karthikeyan Siva.
Table filling and row edit/deletion
So! So far I'm doing fairly well as to what I want to do with an application, where you input a few sets of data, and it's sent to a table. I'm not sure, however, how to enable a little section that would allow me to edit/delete a single line. Here is my HTML, if necessary ( the last two columns without labels will be the top to the edit/delete areas ): <table id="log" class="table table-striped" width="100%"> <tr> <th width="15%">Customer Code</th> <th width="15%">Project
Swipe/Scroll features add to widgets.
I understand the limitations and why you're only allowed to have 5 navbar items, but it would a good addition to add the ability to swipe to to show more items in a navbar. I know that theres the plugins like iScroll and Swipe.js that add on to the touch capabilities in Jquery Mobile, you're unable to target the navbar and create this effect. I know iPad allows users to have a scrollable navbar and its a great feature to add in the next release Also, the ability to automatically add a scrollable
Jquery Malsup Cycle, multiple slideshows with next & prev buttons outside off slideshow
Hello folks. I am using multiple cycle slideshows with the aid of the .js below(great start!) but I would like some more control of the next & prev buttons positioning. But as soon as I move next and prev divs outside of the image slide div I lose all communication to the slideshow and get zero control - no fade action. Ok, so here's my my .js which allows me to have multiple slideshows. I imagine lines 7,8 need some changes? Any help appreciated. $(document).ready(function() { $('.items').each(function(){
Find Performance between 1.7.1 and 1.9.x and 1.10.0
Hi, all... I recently updated the jQuery version my site is using to 1.9.1 from 1.7.1. Unfortunately, performance suffered considerably, especially in IE 9. I have a jsperf test that outlines what I'm seeing. http://jsperf.com/jquery-1-7-vs-1-9/2 $(".k-grid-content tbody:first").find('> tr:not(.k-grouping-row,.k-detail-row,.k-group-footer)') In Chrome, find using the query above is 66% slower in jQuery 1.9 and 1.10 than in jQuery 1.7. in IE, that same query is 92% slower in jQuery 1.9 and 1.10.
Datepicker - DateRange Question
hello, i ve installed datepicker on my page, but have problem to found the right function for a date-range. i need this for both fields field 1 (from): mindate: 2010-01-31 maxdate: today -1 day field 2 (to): mindate: value from field 1 + 1 day maxdate: today perhaps anyone have a idea... thx and regard
how to use one plugin for many elements
hi , i have a plugin like below $.fn.tooltipe = function(opt){ settings = $.extend({name:"just name"},opt); $(this).mousemove(function(){ console.log(settings.name); }); } $("btn1").tooltipe({name:"clickme"}); $("btn2").tooltipe({name:"clickme2"}); when i hover over on both those button the name clickme2 w'll appear in console for both of them i mean if i hover on btn1 i see clickme2 and if i hover on btn2 i see clickme2 again , why this is happening and there are sth else when i use $.fn.tooltipe
Accessing javascript for formatting subsequent html pages. Please help!!
I am trying to put together a jquery mobile site for doctors to practise their Dermoscopy skills on an iPad or tablet. As there will be 81 cases in total (with photos), I'm trying to organise it as 9 html pages with 9 cases on each. I want to resize the list elements with javascript so they fit nicely on to the screen. The first page works ok. The problem is, the javascipt variables for resizing the elements don't seem to be available when the second html page loads - i.e. when the user clicks on
Scaling down a slider and adding javascript to the starting and stopping positions
Hello I am working with a JQuery slider: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Slider - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { $( "#slider" ).slider();
How to make bigger icons???
Hi every one, I'm looking for a solution to display bigger icons in the header, because 18x18 is too small... How can I do it? Thanks!
Superfish broken on narrow browser window
I have a site where the superfish sub navigation refuses to show up if the window is less than about 1100 pixels. This is NOT related to the "sf-smallscreen" or "sf-touchscreen" as I've disabled those and still see the problem. I believe the full drawn out superfish menu is wider than the window and it freaks out and tries to disable itself. Seems silly to me. I've tried many many hacks and css tweaks online to no avail. Anyone have any ideas? http://www.qasstl.org/ Make the window narrow (just
scroll and scrollTop not working on touch devices
On the homepage of the website I'm working on, using .scroll and .scrollTop functions, I'm trying to automatically load more content in real time. It's working on PC, but not on touch devices (phones & tablets), where it doesn't automatically load more content and stops just before loading data. QUESTION: How can I replace the function below to better suit this functionality on phones & tablets with touch functionality? Thank you. var page = 1; $(window).scroll(function () {
Categories Selection
Hello folk , I want to achieve something like this in jquery ..i have a list of categories i want to autocomplete categories in a text box and when users click on them it select that categories and new same text box appears . For better understanding look image below Looking for help Thanks
jQuery UI resize - Helper Box
I'm attempting to resize the container div of an iframe, located on this page: http://curios-channel.tumblr.com/watch For some reason, the helper box doesn't seem to be showing up. What am I doing wrong? My code is in the page source, but for convenience I'll pastebin it here.
create jquery functions in separate files
Hello: I would like to have separate files for my jquery. I would like to create an object such as .billing() and when a user clicks the submit button on a form it calls .billing() on another file and it processes the information from the form. Without writing an involved plugin; how do I do this? or how do I set up the separate file that it can be called from the main.php page? Thanks, shoeGirl
active script
how i can make this work? : $("a").mouseout(function(event) { alert(event.relatedTarget.nodeName); // "DIV" }); i try html:<a href="#">ff</a>and mouse out didn't work
Starting browser window
Hi I am developing a museum kiosk using jquery...I've got it working, but talking to the museum planners, they want the kiosk to restart after a specific time period...so a new person coming to the kiosk will start at the beginning of the interaction. What I have are five panels, and each panel has media, like video and audio...when someone selects Introduction, they will get audio and video associated with the introduction, and it goes through each section/panel as a narrative. So, after one user
Strange behavior in my menubar
I'm trying to make a menubar with HTML, CSS and jQuery. It is working, kind of. When i hover over my main-menu, the submenu appears. But, if I try to move my mouse down past the first submenu, it disappears. Here's my fiddle: http://jsfiddle.net/ZfN7t/18/
New UI suggestion
A sticky header UI would be great ...
JQUI - including code
I've written a dialog script: <script> //Init $( ".ramka" ).dialog({ autoOpen: false, closeText: "zamknij", hide: 'fade', show: 'fade', modal: true, resizable: false }); //Closing window on click $('body').on('click','.ui-widget-overlay', function() { $('.ui-dialog').filter(function () { return $(this).css("display") === "block"; }).find('.ui-dialog-content').dialog('close'); }); //Closing dialog on click $( ".ramka" ).click(function() {$( this ).dialog( "close" ); }); function widthHeight(szerokosc,wysokosc)
jQuery Slideshows make shift-like movement on home page
When viewing on an apple device, the home.php page of my wordpress site makes a shift like movement when the slideshows transition. I've included my code below. I'm unsure if it's jquery or CSS related... any ideas? I can provide css, if needed. Thanks! <script> $(function(){ $('.QuoteSS img:gt(0)').hide(); setInterval(function(){ $('.QuoteSS :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.QuoteSS');}, 6000); }); $(function(){ $('.ServiceSS
Jquery ui - hover problem autocomplete combobox
Hello, i've a little problem with hover. I want change background color of "li" element in the list, it's easy to do using code like that ".ui-autocomplete li.ui-menu-item a:hover{background: blue;color:white;}". This css function work perfectly, but a little problem is present. When my cursor is over the selected element, the "hover" css work correctly, but when i move my cursor, the background color change into default state only for one second This problem is present only from 1.9 and later version
how to find the actual height and width of the image
$(function(){ // JUST FOR THE DEMO var randNum = Math.floor((Math.random()*2)+1); var pathsChoices = {"1":"/images/RESOURSES/im123.jpg", "2":"/images/PDF/im123.jpg"}; var imgPath = pathsChoices[randNum]; // END OF DEMO'S RELATED VARS // resultIP is the response image path var imgDirectory = imgPath.split('/'); // cuts into: '','images','PDF','im123.jpg' $('body').append('<p>Path selected is: '+imgPath+'.</p>'); alert('the directory
how to compare the return value ?
in response image path i am getting "/images/RECOURSES/im123.jpg" or "/images/PDF/im123.jpg" so how can i compare that response valuse is coming from resources folder or not.... how to use that image is inside resource folder,as if its coming from resources folder i need to change the height and width of the image $(".ZoomScrapbook1").click(function () { ImgName = this.name $.post("/Controls/ZoomTo.ashx?ImageName=" + ImgName + "&Add=1", {}, function (response) { alert(response); $('#Imgsrc').attr('src',
Autocomplete combobox onchange event
Hi there, I have the demo of the AutoComplete Combobox working on my site. I am wondering how to trigger the onchange event of the underlying select when I choose a value in the autocomplete combobox. I am using the exact code shown in the demo http://jqueryui.com/autocomplete/#combobox when you click view source. I'm guessing I have to trigger it in the below function but I'm not sure how, Any suggestions? this._on(this.input, { autocompleteselect: function (event, ui) {
Can I show/hide inside a toggled img?
Hi, I'm just learning jquery because I'm building a site for a friend (in wordpress) and want to use some animation instead of loads of pages. What I want to achieve is essentially to show the outside of a building and when a user clicks on it it changes to a view of the inside. I've managed to get that far using code like this http://jsfiddle.net/M9QBb/91/ (once I figured out I needed to use the ready function as well - total newbie! ) The next step is though that once the inside of the building
date picker turns into a line
I am showing jquery datepicker in a modal window.when I click the textfield the date picker appears but immediately it turns into a line attached is the image. It used to work before , but not working now after upgrade of jquery to 1.7.1 it happens in IE 8. what could be causing this any advice? I cannot place the html as this is generated with ajax request.I am using jquery 1.7.1 and jQuery UI 1.7.1.
hiding character in textbox
Hello, I am new to the jquery. I have a requirement that user will be entering their ssn in text box on ASP.NET MVC Website. When user enters digits one by one i want to hide previous digits using *. So for example 1 *4 **9 ***3 Same way if user removes it then it should behave like this **9 *4 1 i hope someone has a solution of this. Thanks, Sandeep
jquery ui tooltip
Hi, i use the jquery tooltip plugin on a href. All the tooltip content is collected by a single ajax request. the problem is now that i can not click (and follow) the link to the link target while the delay is not completed ...
Noty have strange behavior in Internet Explorer
I am using "noty" which is working fine in Firefox - when I have a "noty" it comes down from the top in a separate layer. When I use Internet Explorer 9 it comes down from the top but not in a separate layer which means that it moves content while it is active and when it rolls up again content is coming back up. Is there any newbie mistake I probably may have made since it has this strange behavior in IE9? Looking forward to hear from you all :) Cheers Nikolaj
ie8 issue
SCRIPT438: Object doesn't support this property or method jquery-1.5.1.js, line 639 character 1 code line... } else { for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ) {} } this error is coming in ie8 only. for popup it will not shoe contents.(using jquery-1.5.1.js)
document.getElementById() alternative in jQuery
I have a flash floating banner. It has a X little button to stop floating, so the links from the other divs will be available. With this code down bellow I've managed to manipulate the overflow when clicking on the X button. It's working great, but from what I read document.getElementById works only with one ID and my idea now is to manipulate the floating banner with other blocks too. Let's say block2. Is any solution with jQuery for that? Some example on jsfiddle will be really helpful. <script
Can't catch (window).scroll
I can't catch the (window).scroll event, but I can catch the (window).resize event? Works: $(window).resize(function() { alert("Window Resized"); }); Doesn't Work: $(window).scroll(function() { alert("Window Scrolled"); }); I'm working on a SharePoint 2010 site and I'm sure that the problem is somewhere in the code that SP spits out, but I cannot figure out what would prevent (window).scroll from firing. What would cause this?
calling html elements from iframe html a tag
one.html --------- <html> <body> <iframe id="frid" width="100%" src="two.html" height="90%"></iframe> <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all"> <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> <h3 class="ui-title">Enter your annotation text</h3> <textarea rows="4" cols="50" id="TA"></textarea> <a id="AnnotationText" href="#" data-role="button" data-inline="true"
Dispaly error like span on some validation error in asp .net
I want to display a error message beside of the control which has the error on submit click
Why is this not working
I display my JQuery-UI dialog like this $("#dlgPassage").dialog({ width: 490, buttons: { "Confirm": { "text": 'Confirm', "click": function () { Click_btnConfirm() }, "class": 'myclass' } } }); I then style myclass by using inline like this. But there is no effect on the confirm button ? Why is it not working ? <style> .myclass
Next Page