I have an <img> place holder in my HTML, and when users 'onclick' different button's, a javascript function is called that makes different images appear within the <img> place holder. ie. the src changes. See below:
<body>
<img id="image_space" src="" />
<button type="button" onclick="imageChange(/image1.jpg)">Image 1</button>
<button type="button" onclick="imageChange(/image2.jpg)">Image 2</button>
[code]....
What's the difference between defining a variable with 'var' before, versus defining without it?[code]
View 2 Replies View RelatedI started using jQuery yesterday so im a noob. I have a navigation bar, and i want it to display a background image on the active menu item. (Like the top most menu on this website, it has a little blue underline)
[Code]...
Line 2: It loops though all the <a> tags in an <UL> with id nav_prim. (The <a> tags are inside of <li>'s in the <ul>.
Line 3: I check to see if the <a> tag's href atribute is the same as the URL of the page, if it is
Line 4: i want that specific <a> tag's background-image to be images/nav_bg.gif.
I can't get it to work. In firefox i get the error " $("ul#nav_prim a")[i].css" is not a function.
Why is that? Can anyone please help me? As i've said im new to jQuery and Javascript in general aswell.
I use jcarousel in one of my project. As we know active image in jCarousel, default set in the left or right. Can i customized so active image will centered? Let say there's 5 image and i want image number 3 in the middle is set as active image.
View 4 Replies View Relatedgetting all the header text:jQuery("#accordion h3").text();how do you get the active index? and how do you use that index to get the active header?how do you get the header text for the active header?
View 1 Replies View RelatedI've created a nav bar for this site - [URL].. I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. How would you suggest I edit or add to my code so it keeps the second image active if it is the active page? In my script file this is what I'm using for an image:
menu1buttonup = new Image();
menu1buttonup.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1.jpg" ;
menu1buttondown = new Image() ;
menu1buttondown.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1a.jpg" ;
[Code]...
I've created a nav bar for this site - [URL] - I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. Do I edit or add to my code so it keeps the second image active if it is the active page?
In my script file this is what I'm using for an image:
menu1buttonup = new Image();
menu1buttonup.src = "[URL]" ;
menu1buttondown = new Image() ;
menu1buttondown.src = "[URL]" ;
Followed by....
function buttondown( buttonname ){
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}} function buttonup ( buttonname ){
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}}
And this is what my list items look like:
<a href="<?php echo home_url(); ?>/?page_id=7" onmouseover="buttondown('menu1button')"
onmouseout="buttonup('menu1button')"><img src="<?php bloginfo('template_url'); ?>/images/menu1.jpg" name="menu1button" /></a>
Bit of a lengthy topic name, I know - I'm trying to make a sort of really lightweight online t-shirt designer - basically, it'll show a picture of a t-shirt in the background (you'll be able to change the color via selector), and then be able to upload an image, drag it around the t-shirt and resize it. I've found this: [URL]. But I have no clue (after looking at the JS, I'm still pretty new) how to set bounds to keep it in, or how to save/output the image it creates - that is, the uploaded image on top of the t-shirt needs to be saved as a single image and then output, probably via email. I am fairly fluent in PHP, but still pretty new to javascript. What is A, the best way to upload the user image (and give a max file-size) and B, the best way to drag/resize it around the t-shirt, but without moving it off the t-shirt image, and C, save that image then output it?
View 2 Replies View RelatedI have just created an 'open window' function for an animated page. It opens the current animation from the current page into a new window, and lets the user change the 'opener' animation while the new animation in the new window continues, sychronised with the opener.
As the opener contains the clock for sychronisation, I can only use the animations from that page (and I have a few pages of small animations). I can let the new animation on the new page continue with its own clock if the opener is closed, but what I would like is if a new animation is started from a new opener, then it tells the existing opened window the new page speed...
got it?????
trymy rhythm pages
follow steps.....
1; open new window
2; click on drum in new window to turn on
3; start rhythm by clicking on hands in main window
I can change between rhythms, so long as I stay on the main page. The problem is when I change the main page to go to other rhythms I loose the sychronisation.
I can go to another page(from opener) and put a new rhythm in the current new window, but I would prefer to keep the old rhythm and sychronise.
I think this is just a dumb question, I'm missing some basic logic here about jquery "grammar".
I'm trying to do an image swap on hover that checks to be sure the thumbnail is not the active thumbnail. So mouseover, it swaps. Mouseout, swaps back, unless the thumb has been clicked.
Here's a snippet of the code that doesn't work:
How do I check that _li is not ".active" and replace the src if it isn't?
I wish to access several pictures on my page by defining them as an array. This way I can either loop through them or access them by array index.
What I am really doing is writing my own picture gallery and slide show. The reason I am doing this is so that I can have my web page look exactly the way I want. In addition, it is an excellent way to learn Javascript.
<input type="file" />
For the above input, is there any way I can change the value? I found that adding: value="asdf" doesn't change anything with a type="file" input.
I have the following code that works in FF but no IE:[code]This is a variable that is used in a js slideshow. The text doesn't change with the image in IE.
View 3 Replies View RelatedI'm trying to solve a problem for which I think the solution will be
to *cheat*; but I don't mind doing so for this case. The background is:
Given an object constructor, and an instance
SampleObj = function() {
this.prop = 1;
}
obj = new SampleObj();.....
Code: function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {[code].....
For the above piece of code, does the function 'function initArray()' just predefine the array that is written right after so that it's first array index starts at 1 instead of 0?
I have built a function that allows users to select a color tile and trim option for a cooking range. Here is a code snippet showing the function:
var color, trim, description;
function displayRange(selectColor, selectTrim, showDes)
{
var rangeName;
if (selectColor != '')
color = selectColor;
if (selectTrim != '')
trim = selectTrim;
rangeName = "images/cluny1400" + color;
if (trim == 'chrome')
rangeName += "_chrome";
rangeName += ".jpg";
var rangeDescription;
if (showDes != '')
description = showDes;
rangeDescription = description;
document.getElementById('rangePict').src = rangeName;
document.getElementById('rangeDes').innerHTML = rangeDescription;
}
Based on the users selections the range image in the selected color and trim is loaded into the interface. My problem is this:
The selected image is made up of three elements, based on the users selection, color and trim and the .jpg extension. This function works well.
However, I cannot work out how to use the image object to preload the images (of which there will be over 34). Normally you would assing a var to hold a new instance of the image object and then assign the src property to the image url. But how do I do that when the var rangeName is composed of three elements. I cannot use a simple var and then call that var in the function.
I have this code snippet, that illustrates my problem:
// create function to preload images
// eliminate older browsers by checking for image object support
function preload() {
if (document.images) {
cluny1400au = new Image(478, 314);
cluny1400au.src = "images/cluny1400au_fw.jpg";
cluny1400au_fw_chrome = new Image(478, 314);
cluny1400au_fw_chrome.src = "images/cluny1400au_fw_chrome.jpg";
}
}
The vars cluny1400au and cluny1400au_fw_chrome would be fine if I could use them in the function to call the images, but I don't think this will work as I believe that you have to use the same var name in the function as in the image object.
Can anyone tell me how the cluny1400au = new Image(478, 314); and cluny1400au_fw_chrome.src = "images/cluny1400au_fw_chrome.jpg"; should be constructed to work with the function.
Here is an html snippet from the page to aid clarity:
<body onLoad="preload()">
<div id="wrapper">
<p><img src="images/cluny1400_bw_chrome.jpg" name="rangePict" width="478" height="314" id="rangePict" /></p>
<p id="rangeDes" name="rangeDes">Description</p>
Thank you in advance for any help.
I would like to have an array and define which element goes to what key. Something like this:
Code:
var test = [][];
test[0][0] = "foo";
test[0][1] = "bar";
However I am wondering if its possible to write it in one statement? Something like this:
Code:
var test[0] = [
[0] => "foo",
[1] => "bar"
];
The code up doesn't work of course.
How to avoid the execution of a function at the time of defining.
Here i am giving the details.
I am creating the following div container through DOM.
<div id="content">
<a href="#" onclick="displayDiv('content')" Click</a>
</div>
The Code is:
var category_list = document.getElementById('category_list');
var dom_div = document.createElement('div');
dom_div.id = 'content'
var dom_link = document.createElement('a');
dom_link.href ='#'
dom_link.onclick = displayDiv();
val = document.createTextNode('Click');
dom_link.appendChild(val);
dom_div.appendChild(dom_link);
category_list.appendChild(dom_div);
The displayDiv Funcion
function displayDiv()
{
dv = document.getElementById('content'); //Here is the error.
}
The Problem is when the following script:
dom_link.onclick = displayDiv('content');
is executed it is calling the function displayDiv(name)
Here we have the code
document.getElementById('content');
which throws the error.
The reason is the div container is not yet created.
What I need is the function should be called only on the click event. It should not be called while I define it to the Click Event. (ie it should not be called at the time of defining)
How to achieve this.
How can I dynamically specify a class value to use in a selector? For instance, I have a number, and I need to identify an element that ends with that number. In this case, there are four divs that have class values of
my_id_0
my_id_1
my_id_2
my_id_3
I have a 0 (obtained previously in the code) stored in the value tabId, so I want to get the values of the class attribute for <div id="my_id_0">. How do I create my selector? I tried
$("div# parent_element_id #my_id_" + tabId).attr("class");
but it comes back as undefined. Do I need to define it as a variable and put it in theelector that way? Or is there another way?
I'm trying to define a selector as a global variable and it keeps coming back undefined. I tried creating a namespace for it but had no luck. I would like to be able to reference the sliderRange, currentMin, currentMax globally.
SLIDER.range = $('#price-slider').slider('option','values');
SLIDER.min = SLIDER.range[0];
SLIDER.max = SLIDER.range[1];
[code]....
I'm trying to code a script that will display an approximate postage price based on different combinations of variables, but the numbers I defined for each case aren't reflected in the text box. I'm using a switch statement for all the different combinations of options, which the user will choose by selecting check-boxes. (Additionally, I know that this code probably isn't a very efficient way of doing what I'm doing - how to improve it.) I've attached all the relevant parts of the code, including how I defined variables originally.
<script type="text/javascript">
function count(){
var firstclass = document.calc.firstclass.value;
var postcard = document.calc.firstclass.value;
var numpages = document.calc.numpages.value;
var nms = document.calc.nms.value;
var large = document.calc.large.value;
var numpages = parseInt(document.calc.numpages.value); .....
I am making a HTML form which will take elements passed from the server. I cant get it to display correctly.
<html><head>
<script type = "text/javascript">
var dict = new Object;
[code]....
1.In ZZZ.html i have a long list of text items formated like this:
<div="part1">
<span > <h3 >AAA</h3><h4>BBB</h4></span>
<span > <h3 >CCC</h3><h4>DDD</h4></span>
[code]....
In another document i made some buttons to change slideshow content by loading sections id to
<div id="cyc" class="slide"></div>
using function:
$('#cyc').load("ZZZ.html #part1");
etc...
Text loaded, but the slideshow didn`t work
2.How can i loop specific range of slides ( and make it modifiable with some "range selector" in browser) ?
3.Is it possible to trigger some event on the desired slide number ?for example:
on slide 3 - play sound
on slide 6 - display message
on slide 15 - go through slides 10-15 four times
[code]....
let me try to explain better what I'm trying to do. I'm a real newbie I don't know much javascript but I understand more or less the logic behind it... tell me if this solution should work and if you know how to do it please show me. [URL]... I need to make div#photo's width to match the total width measurement of all the images it contains. If you load the page and you don't touch the size, it will work fine... but that's not realistic. If I resize the page, which will happen often on this kind of page (I'm assuming), the whole thing goes haywire (try it, scroll to the last image and resize the page you'll see what I mean). What can I do? Is my idea the right solution? Am I not explaining this clearly enough? Let me know please, I'm desperate. I've been trying to get CSS to do this for me for 3 hours now. Nothing works.
View 6 Replies View RelatedI have a javascript program that uses a HTML table as an Excel-like grid. The user can use arrow keys to navigation the grid. When the user selects a cell and then hits <Enter> key, the program turns the cell from read-only to editable (an input box), and select all the text in the input box. When the user hits <Esc>, the program cancels the changes that the user has made and turns the cell back to read-only. So far so good. The problem is that as soon as the user hits <Esc> key and turns the cell back to read-only, I find that I cannot move the input focus back to the cell any more. Actually I cannot move the input focus back to _any_ cell in the table. When this happens, the user cannot use arrow keys to navigate the grid any more (like the grid has lost the input focus). The user needs to use the mouse to click at a cell in the table to get things working again.
The user can get around with this problem by un-selecting the text from the input-box before hitting <Esc>. But this is not something that I expect the user to remember to do. I need a way to fix this problem. I tried the logical thing and programmatically un-select the text before turning the cell back to read-only. But this actually made thing worse - this causes the workaround to stop working.
The only browsers that I have tested this program is IE6 and IE8. I have not tested this in any other browser.
Attached is a simplified version of the program that can show this problem in action. This simplified program first adds an empty table on the web page, and then creates an instance of the CEstGrid class that takes care of the grid. CEstGrid will add two rows of test data into the table with two columns in each row. The user should use a mouse to click at one of the cell, and the cell should be highlighted. The user uses arrow keys to navigate the table. When he reaches the end of the table, he will wrap around to the other side of the table. Let say the user reaches the cell in row-1 column-2, he hits <Enter> to change the cell to editable. He will find the text in that cell to be highlighted. When he hits <Esc> at this moment, he will find that he cannot use the arrow keys to navigate the table any more, and this is the problem. Please rename the test program from .TXT to .HTML to test it.
I am trying to define a variable as follows:
var music_id = $(this).attr('id');
var mix_class = $('#le' + music_id);
In other words, if music_id is mix3, I want mix_class to be #lemix3.The above code is not working for me and I would like assistance as to the syntax to produce such a result
