I have a simple question about calling the same function to multiple ellmenets. I guess it should be done with index.Here's my code:
Code:
$('.tab_map1 area').hover(function(){
$('#nav1').find('a').stop().toggleClass('hover', 500);
[code]...
I'm working on a website for a client and we've decided to use CSS3 instead of Flash for multiple reasons, compatibility with mobile devices being the main. However, there's a lot of animation on the page such as fading, positioning and opening/closing and it seems to be tripping over itself attempting to process everything.
I've created an animation class that schedules all of the animations so that there's only one setTimeout running for those animations at any given time. I've also set it up so that any web browser capable of CSS3 transitions use those instead of the JS animations. The animations lag in both CSS3 and JS functionality, although the CSS3 is slightly better.Some animations lag even if they're the only animation running. For instance, trying to fade a full-screen image in/out chugs even on test pages I've created only containing the one function.
I understand that Flash uses hardware acceleration and has optimized rendering, and the reason the browser is lagging is most likely because it's all being processed unoptimized and through the CPU. However, I'm sure there must be a way to make this site smoother than it is.I'm posting here because my deadline is coming hard and fast, to ask for assistance with:Tips on how to optimize my code to run smoother in JS and/or CSS3.how to be able to fade large images/areas with less lag.I've been trying to move most of my code into OOP as I've gone along, but some functions are still a bit "spaghetti" due to my time crunch.
I would like to make the following statement clearner. I'm thinking something like the SQL "variable IN (value1, value2, value2, etc.)" operator.
Code JavaScript:
if((e.which > 47 && e.which < 58) || (e.which > 95 && e.which < 106) || e.which==8 || e.which == 46 || e.which == 37 || e.which == 39 || e.which == 13) return e.which;
im currently creating a dropdown menu with an animation to it, my current jquery script is as follows
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");
$('ul.menu_body, img.menu_head').hover(function () {
[code]....
Im trying to get 2 elements to execute some effect individually at the same time on a hover.Ive looked at .animate but if I understand it correctly I can do multiple effects but still limited to that single element.[code]So basically Im just trying to get 1st & 2nd on hovers to happen at the same time and 1st and 2nd off hovers to happen at the same time.
View 1 Replies View RelatedIs it possible to use multiple JQuery Effects for navigation hover? For example, a navigation button that changes colors and shapes, such as when the user hovers over the button, the button first turns red then fades to blue...something of that nature? Or is JQuery even the right tool to do such a thing?
View 1 Replies View RelatedI have a grid that uses RowAltRow as the classes for the rows...is there a way to have the hover applied to both instead of having to define it twice (or more)?
[Code]...
I'm trying to have an ordered list, each item with its own image. Then, I'm trying to use JS so that a different popup is generated for each image.
Currently, I'm using CSS classes to define the appropriate popup image, and this seems to work fine as I can see the popup contents in Dreamweaver.
I think the issue is the 'getElementById' thingy. As whichever image I hover over, it always pulls the first hidden popup.
JS
Code:
HTML
Code:
CSS
Code:
Is there a way form me to also pull the class that is referenced in the html, so that the appropriate popup is generated?
I don't think I'm using the code highlighting properly and I intended to link to the page, so you could see what I'm talking about, but apparently that's not allowed.?
Is it possible to swap the link image that is hovered with another image and at the same time swap different images on another place on the page? I was trying to do it in CSS but I couldn't figure out how to do both at the same time. Basically I want to go from:
after hovering over linkimg1. I can get it to do both separately but not at the same time unless I am missing the combining factor or something. Let me know if you need anything else (i.e. site, missing code) Here's the code I'm working with:
HTML Code:
[Code]...
In the past I've done image rollovers and that's fine. I got scripts for those, and got them to switch fine. But what I want to do is edit the backgroudn color of a TD, which is code defined, and not an image. Anyways, the basic thing I'm doing is a table that hold lots of numbers. I'm creating a "times table" - which looks roughly something like this:
......1 2 3 //top row (multiples)
1.....1 2 3
2.....2 4 6
3.....3 6 9
Now, when you rollover, let's say, the '6' - the TD background color for the '6', left '2' and top '3' would change to a different color (bolded in this example). This would work the same way for every other number as well, which involves overlapping classes. I've search for an answer for hours, to no avail. And here's a more "code specific" example of the table:
Code:
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>2</td><td>2</td><td>4</td><td>6</td>
</tr>
<tr>
<td>3</td><td>3</td><td>6</td><td>9</td>
</tr>
</table>
Also, the image rollover script I have goes like this:
Code:
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
} .....
I've tried to make a simple hover effect about small images but it won't work. I also tried to make the following script: 2 seconds after page loading image1 changes 2 seconds after that image1 returns to back state and image2 changes and etc.
<html>
<head>
<style type="text/css">
#as:hover{
background-image: url(images/numr.png);
} #ad:hover {
background-image: url(images/numr.png);
}#af:hover{
background-image: url(images/numr.png);
}
</style>
</head>
<body>
<input type="image" src="images/num1.png" id="as">
<input type="image" src="images/num2.png" id="ad">
<input type="image" src="images/num3.png" id="af">
</body>
</html>
I have been trying to do some tooltips for a website and desperately wanted to learn something new and do that with jQuery.However, every time a mouse hovers over a tooltip, all hidden divs are shown, not just the one that supposed to. Here's my html:
Code HTML4Strict:
<div class="tip">
<a href="#"></a>[code].....
Since its not multiple its not going to show all the 3 options selected, so I created a little button with the easy statement in JQuery it is working, it makes the Select Multiple, it expands the Select and make the items selectable, but on the other hand it does not show the already selected options.
View 1 Replies View RelatedCan someone provide me with the javascript code for deleting multiple rows..i.e..User will be selecting certain rows with checkbox and on clicking on the delete button,those checked rows should be deleted..I want it in Javascript and not Ajax.
View 13 Replies View RelatedSo today I have discovered some malicious JavaScript code inserted into a bunch of my pages on a webserver. Access to these pages through FTP is granted to 3 people, myself, my boss, and a contract programmer. Unfortunately, the FTP server wasn't set to log, so I can't tell for sure if it was the programmer, but my assumption and suspicion is that it was him.
This code was inserted at the bottom of multiple pages. I can't make heads or tails of it, but it cannot be good, whatever it is. When I view the page that it was on, I noticed the web browser connecting to [url]. Browsing to this page takes you to some foreign hosting site. Googling superseasilver.ru only provides a page that has this address listed in a blacklist.
Code below:
What I am trying to do is have an input box where the user inputs a word(s), the a button which onclick changes the user's input data so that each line is modified to have a "<<" before the word and a ">>" after.
For example :
user types:
apple
orange
pear
[Code]...
I have obtained script for a photo gallery and have placed it on a web page. I have duplicated the html code 2 more times for the additional 2 galleries I need. The first one works, the other 2 don't (nothing happens when you click on the thumbnails). I know I need to refer to the other 2 in the javascript file, but I'm not sure how. Here is the javascript file code for 1 gallery, which I need to modify for 3 galleries, but don't know how...
clickMenu = function(menu) {
var getEls = document.getElementById(menu).getElementsByTagName("LI");
var getAgn = getEls;
[Code]....
Is there a way you can control history on a specific iframe?
Let say you have these file
index.html
a.html
b.html
As you can see it's just very simple page w/ 2 frames. I created 2 button that is specific to iFrame's history but... it does not work... Yes, it does perform "back" but at the the "top" level and not at specific iframe.... I tried this on both firefox and chrome..same behavior..
Is there a Javascript code to change multiple affiliate link/content daily?
View 19 Replies View RelatedUmm, this is a tricky one to add a descriptive title for!
Basically I have two links on the page that go to the same page when clicked. What I want to do is when I hover over one of those links for the hover to work for both of them and visa versa.
So I have this links
<a class="connected" href="">Connected</a>
<a class="remove" href="">Remove</a>
a.connected { background: url(../images/connected.png) no-repeat 0 top; }
a.connected:hover { background: url(../images/connected.png) no-repeat 0 bottom; }
[Code]....
here is the page I'm working onhere is the jQuery in use
$(document).ready(function() { $('.error,.success').hide(); $("#send").click(function (){ $('.error,.success').hide("slow"); $.ajax({ url: 'add.php?lnk='+$.URLEncode($('[name=lnk]').val())+'&
[code]....
and in this code, it works, the call is made and text is added. in the other code I don't get a change at all. Not even in the database that add.php manipulates.
I am trying to make a gui for clients to edit a php page that displays html and javascript.
I want the user to be able to move html elements around and even edit it like add effects like fade in and out etc.
Then after all the changes I want to overwrite the existing php file that does this for that user. how can you make such changes and then save it to a file?
It's an html / javascript editor but using a gui instead of allowing them to directly touch the code. It would be a security risk if I allow such a thing. So I need to program a interface that would make such changes and save them to file.
Like how can you delete and add new javascript code to the file?
I am trying to hide this code:
HTML Code:
using this code
HTML Code:
This works fine when I place this code under the html in the main source, but if I try to add this Jquery code to an external js sheet it doesnt seem to work?
Currently my js sheet is called in the header, when I move this link to the footer of my page the code works again, so Im guessing this has something to do with where the jquery code is placed in relation to the code Im trying to hide?
How I can keep my js in the header but still make the content disappear on click?
The code executes nicely in the site and the pictures/text show up where and how they should - It's just that I'm also getting some code as a slide!
In the <head> I have:
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 8000;
$(function() {
$('#contentLeft pre code').each(function() {
[Code].....
I've been stumped. I'm usually good at figuring this stuff out, but I'm completely confounded here.I have a form with tables in it to add items to a series. The rows are being added dynamically by Jquery on the click event.
$('#add_hybrid').click(function(){
$('#hybrid tr:last').after('<tr><td width="15%"><?=brands('hybrid');?><input name="clubtypes[]" value="6" type="hidden" /></td><td width="25%"><?
[code]....
I am using jquery with the cookie plugin and I have multiple image buttons that can hide/show multiple elements. My question is how can I add a cookie to this code to remember whether each separate element is opened or closed?
The code,
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<div class="expanddown"></div>';
var hideText='<div class="expandup"></div>';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" class="togglelink">'+hideText+'</a>');
// capture clicks on the toggle links
$('a.togglelink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? hideText : showText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').slideToggle('fast');
// return false so any link destination is not followed
return false;
});
});
HTML,
<a class="togglelink" href="#"></a>
<div class="toggle">
Content
</div>