I need this script to work real badly. been trying to fix it all day.
Basicly, whenever you click on an example from the list it needs to update either the Normal background, or the Hovered background (as user select).
but it requires IDs so i can add links as new examples, so whenever i add a new with a value in it's 'name' it needs to be a new example.
its like having the same script , but twice. one for normal bg, and one for hovered.
theres also a list show/hide script that i haven't figured out how to make work,
i'm not much of a javascript scripter but i managed to get that in a few hours.
i really need some help here, and i will appreciate if you help me.
thank you.
/Edward
jsfiddle.net/5tq2Y this is the fiddle. but it won't work on it for some reason
the js:
<script type="text/javascript">
function change_bg(){
document.getElementById('button_bg').value = 'BY THE DIFFRERENT <A> NAMES';
}
function change_bg_hover(){
document.getElementById('button_bg_hover').value = 'BY THE DIFFRERENT <A> NAMES';
}
</script>
the input that needs the updates:
<input type="text" id="button_bg" name="button_bg" value="">
<input type="text" id="button_bg_hover" name="button_bg" value="">
the html:
<b>Show/Hide Background examples list</b><br />
<a id="changer" name="images/examples/1.jpg" onclick="change_bg()"><u>Example 1 Red</u></a><br />
<a id="changer" name="images/examples/2.jpg" onclick="change_bg()"><u>Example 2 Blue</u></a><br />
<b>Show/Hide HOVERED Background examples list</b><br />
<a id="changer" name="images/examples/1_hovered.jpg" onclick="change_bg_hover()"><u>Example 1 Blue Hover</u></a><br />
<a id="changer" name="images/examples/2_hovered.jpg" onclick="change_bg_hover()"><u>Example 2 Red Hover</u></a><br />
For starters, you can't have multiple elements with the same id value, so your id="changer" will have to change. I would propose class="changer".
Edit: I actually gave them unique ID's so you could look them up for the complicated means of retrieving their attributes in the fixed code. If you want them to share a common rule for css or javascript targeting, I still recommend class="changer".
I think what you want to have is this:
User clicks a link.
Background of a different element changes
What it changes to depends on what was in the name attribute of the clicked link.
If that's accurate, well, I don't even know how to do it cleanly without jquery. Try this for the html:
<u>Example 1 Red</u><br />
<u>Example 2 Blue</u><br />
and this for the javascript
function change_bg(elem){
document.getElementById('button_bg').value = elem.name;
}
function change_bg_hover(elem){
document.getElementById('button_bg').value = elem.name;
}
Fiddle: http://jsfiddle.net/aGCNn/
Ask how to do it with jQuery, you'll like the answer. I promise!
I made a fiddle that work http://jsfiddle.net/juzVG/2/
Please check if this what you want.
I also made a few modifications to the code.
Example 1 Red<br />
Example 2 Blue<br />
<b>Show/Hide HOVERED Background examples list</b><br />
Example 1 Blue Hover<br />
Example 2 Red Hover<br />
Related
I've been rummaging through the web to how to click buttons for a project I'm working on with Javascript+JQuery(Still not very good). Luckily I was able to find my answer and figured out how to click basic HTML buttons that looked like this(Cut off some of the code just to get the point across).
<div class="ui-block-a">
<input type="submit" value="Buy Now" data-theme="d">
</div>
But now I've come across a button like this.
<div id="BuyWithRobux">
<div data-expected-currency="1" data-asset-type="T-Shirt" class="btn-primary btn-medium PurchaseButton " data-se="item-buyforrobux" data-item-name="Donations" data-item-id="170938328" data-expected-price="2" data-product-id="20832770" data-expected-seller-id="180359" data-bc-requirement="0" data-seller-name="Clone3102">
Buy with R$
<span class="btn-text">Buy with R$</span>
</div>
</div>
Just based off of what I know I don't think I can use what I used to click the last button which was...
$("input[type='submit']").click();
So my question is how can I click this "button"? I've tried using my old code on it to no avail. I rather not use Selenium, or anything if at all possible. Could anyone help me out with this? If you need anymore information just say what and I'll do my best to provide it, fairly new to this so don't know what to include sadly.
Thank you in advance.
By "clicking this button" If you meant to trigger a click on div#BuyWithRobux , You can do so like
$("#BuyWithRobux").click();
or
$("#BuyWithRobux").trigger("click");
The syntax for triggering a click remains the same, all you've to do is to use the right selector to target the element on which you need to trigger the event.
You can learn more about jQuery selectors here
I need to create a simple button made only of an image, and which will open a JQuery Dialog when the user clicks on it.
I am doing some reading and notice many solutions: <button>, <image> with a <a>, using CSS to modify a button background, etc...
This is confusing, what is the proper way to implement my image button?
Thanks.
P.S.: The button/image should be focussable. An operational JSFiddle example is welcome.
The proper way largely depends on what the button will do if JavaScript is not available.
If you are going to submit a form then:
<button> <img src="..." alt="..."> </button>
If you are going to go to a URL then:
<img src="..." alt="...">
If you are going to do absolutely nothing (generally not a good idea, you should follow the principles of Progressive Enhancement and Unobtrusive JavaScript, but acceptable if you only generate the button with JavaScript in the first place and the loss to the user is convenience rather then essential functionality):
<button type="button"> <img src="..." alt="..."> </button>
You then bind the JavaScript to either the form's submit event, or the button/anchor's click event and prevent the default behaviour so the form won't be submitted / the link won't be followed if the JavaScript executes successfully.
Create a button and put background-image for it.
Checkout the fiddle.
http://jsfiddle.net/siyakunde/Y38nz/
I found the solution after many struggles: http://jsfiddle.net/YRY8M/3/.
<html>
<head></head>
<body>
<input type="image" tabindex="0" onclick="doSomething()" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG"
/>
<br />
<button tabindex="1">I am focussable too !!!</button>
</body>
</html>
And some javascript:
function doSomething() {
alert('Hello!');
}
It depends on what you want to do in every case. There is no guideline that says "you should do it like this", but there are situations that some cases are more suitable than others.
For example according to this review, IE versions of 8 and below have some buggy behaviour regarding <button> tag when trying to use it as a submit button.
Ηowever the <button> has some new attributes added in HTML5 which you can see here , ammong them is autofocus and other useful that will be supported by most modern major browsers.
In your case that you want to maintain the "focus" (i assume with tabbing support), if you use a single <image> as a button (with or without <a>), you will have to add some JS code to make the image focusable when the appropriate tab is pressed. So you will have to write a bit more code to do the same thing.
There is one more solution which might be suitable for you, since you do not need to submit the form to server side. Using the <input type="image" type and defining the src attribute inside it, will be focusable and not require neither any JS code to run nor any difficult CSS. You can find more about it's syntax here
So, it ends up to you to decide which one of all them to use.
I would use the one that i find more flexible, easier for me to code, easily reusable and is supported by most of my target browsers.
Use jQuery as you own it...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
#theBtn{
margin: 20% auto 0;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG');
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="theBtn"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#theBtn").click(function(){
if(confirm('Are you sure?')){
$("#theBtn").fadeOut('slow');
}
});
});
</script>
</body>
</html>
Inside a <button> tag , put your image, and attach an click event to <button> to open the dialog on click.
JSFiddle
First thing, There is either an image or a button. But not both.
I would say, create an image and place your code in the onclick() function of that image.
var img= $("#my-image-id");
image.click(function() {
// your code here
}
As I know You can't change the look of the Safari buttons thats why I suggest to use a for the solution. Here is my simple code: http://jsfiddle.net/djgBK/1/
The basis is:
Take an a element put the link content to the left,
Then replace it with image that is actualy it's background. Becouse it's a element user can select it usin only TAB button.
What's more using an a elemet will let You to put title which will be displayed after hovering/entering over the button.
Ok I have a small question.
I have the following
<div><span class="spanright" onclick"">Update</span><label class="myinfo"><b>Business information:</b></label></div>
What I want to do is when the user clicks on the span it changes the html after the label an adds an input box and submit button.
I think I need to do a this.document but not sure
Hi hope this might give you a small understanding of what to do when it comes to registering events. StackOverflow is about you learning how to do something, so we dont write the scripts for you, we are just trying to point you in the right direction of it.
http://jsfiddle.net/WKWFZ/2/
I would recommend you to import jQuery library, as done in the example, if possible. It makes the the world of javascript alot easier!
Documentation to look up:
http://api.jquery.com/insertAfter/
http://api.jquery.com/bind/
Look up some jQuery tutorials! there is alot of them out there.
I added a form which will hold the input
JavaScript:
function showInput()
{
document.getElementById('container').innerHTML += '<input type="text"/><input type="submit"/>';
}
HTML:
<div id="container">
<span class="spanright" onclick"showInput()">Update</span>
<label class="myinfo"><b>Business information:</b></label>
</div>
Summoner's answer is right, but I prefer using jquery (it's loaded on almost every page I work with):
HTML:
<div id="container">
<span class="spanright">Update</span>
<label class="container"><b>Business information:</b></label>
</div>
Javascript:
$(".spanright").click(function(){
$("#container").append('<br /><input type="text"/><input type="submit"/>');
$(".spanright").unbind('click');
});
This way, the click event will work once, as it is what you probably intended.
Try this in jquery flavor --
$(document).ready(function(){
$(".spanright").click(function(){
$(".myinfo").css("color","red");
});
});
Check fiddle --
http://jsfiddle.net/swapnesh/yHRND/
I have a form that I create a checkbox on a click of a button. I am using https://github.com/pixelmatrix/uniform which provides an update function to style dynamically create elements which does not work. I got a work around but my problem is that it also reset the already created elements so they double, triple etc.
They are wrapped in a div with a class of checker. Is there a way to check if the div is around it first before applying my $('.table').find('input:checkbox').uniform(). I have tried different examples but they dont seem to work with my code and my jQuery is still limit.
Thanks
<div class="checker" id="uniform-160">
<span>
<input type="checkbox" name="chbox" id="160" style="opacity: 0;">
</span>
</div>
jQuery:
$(".fg-button").live("click", function(){
$('.table').find('input:checkbox').uniform()
});
Try this:
$('.table input:checkbox').not('div.checker input').uniform()
i have a html of this format.
<html>
<head>
...
</head>
<body>
<label id='view' onClick="ShowMe()">show my name</label>
<img src="home.jpg" width="800px" height="600px"/>
<div id='name' style="display:none;height:200px">Your Name is DARSHAN</div>
</body>
</html>
and in javascript i have this function
ShowMe()
{
var nameDiv=Ext.get('name');
var viewDiv=Ext.get('view');
nameDiv.setStyle('display','block');
nameDiv.anchorTo(viewDiv,"tr-br?");
}
this thing works fine in all browsers but in IE,When i Click on 'Show My name' label,its displays the 'name' tag near the show my name but also a vertical space is taken up by 'name' Div tag and a scroll bar appears. How to get rid of it?
How can this work? There are lots of errors in this code:
There should be a semicolon in your style attribute value, not a comma:
<div id='name' style="display:none;height:200px">
There is a typo - display is called dispaly:
nameDiv.setStyle('display','block');
Also, what are the setStyle and anchorTo functions? What library are they from? Did you write it yourself? Please provide some more information.
EDIT: Thank you PPvG for adding tag extjs
Please provide snippets of the actual working/faulty code (copy and paste) instead of manually writing new code.
The inline style on are divided by a ","
That's invalid, CSS rules have to end with a semicolon ";"
IE is pretty picky when it comes to valid html/css
After discussing it with one of the experts at office i got to know this.
when you define Div at one place and anchorTo somewhere else this problem might come. how the anchor tag works is it will take the coordinates of the div to which we r anchoring and define the top and left of the new tag accordingly. So we need to make sure that we have defined 'poistion' attribute value to 'absolute'.
So to my problem solution was adding
<div id='name' style="display:none;height:200px;position:absolute">Your Name is DARSHAN</div>