|
JavaScript - Click An Image The Size Of An Icon, Drop Down Menu Appears.
Hello all,
Essentially what I am trying to get without much success on the issue is this: I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window. This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason. I am obliged for any help on this. *edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though. Similar TutorialsSo, I'm new to Javascript but really just need the one code. I've tried the tutorials but I have never worked well with those -- I've always found it easier to actually be working with someone. But anyway. Basically, I need something sort of like this -- you click the thumbnail and the image appears in that predetermined spot. One thing, though: the images have to layer over each other. Like, you click image A, and it appears in the spot. You click image B, and it appears on top of image A. It'd be even better if when you clicked Image A it appeared and then you clicked image A again and it disappeared, but I'm going to try to start small. I've gone through the tutorials and have a sort of ish understanding about what some of the parts of the codes do, and I've been told I'm a fast-ish learner, so I think I'll catch the hang of this quick. Thank you! <3 Edit2:: This is what I got to work. Code: <INPUT class=touch type=button value='UP' onMouseDown="up=true;" onMouseUp="up=false;"> <INPUT class=touch type=button value='DOWN' onMouseDown="down=true;" onMouseUp="down=false;"> Then added a check to see if (up==true) {move up code} else if (down==true) {move down code} etc Edit:: Basically Code: <INPUT class=touch type=button value='38' onMouseDown="movingUP();"> Then in JS Code: function movingUP(){
window.event.keyCode = 38;
}
But what do I put in movingUP() to send keyCode 38 when while the button is being clicked????????????????????? Trying to add 8 icons of W,A,S,D, LEFT, RIGHT, UP, DOWN which upon click/touch will input the relative command to the screen canvas for mobiles that don't have a keyboard. They aren't clicking on the canvas. I need some buttons/icons/images outside the canvas probably in a div, that send input events as an alternative to a keyboard...Something that can be clicked and held down to repeatedly spam that key to walk in that direction. I have script to click icons from a keyboard and output the clicked key to a text field, but I don't know how to tie it into my keyboard listener in my game.. My game code uses: Code: // Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
Then elsewhere I can trigger events when keysDown contains the number of a key that triggers an item like: Code: if (38 in keysDown && hero.y > 0 ) { // Player holding UP key
//walk north code here
}
Is there a simple way to click on a button and send the "UP" keyCode to the entire screen? Particularly the canvas element......Or get it into my keysDown[e.keyCode]; I found this: Quote: function addKey(cKey) { d = document.forms["foo"].elements["bar"]; d.value = (cKey.value=='backspace') ? d.value.slice(0,-1) : d.value+cKey.value; } //elsewhere in html body <INPUT class=touch type=button value=w onClick="addKey(this)"> which will send 'w' when clicked, and I tried to send '38' instead but it only sends it to 1 element and not the entire screen....so it shows 38 in a text box each time I click it but it doesn't actually send 38 to keys being pressed. Is there a simple way to do this? I wanted to add a fire button and others I figured I could just put an image with an event but can't figure it out.... Hi all, this is my first post so forgive me for any errors but i'll try and give all the information i can. i use Xara Designer Pro and i have used a 3rd party software to create a html menu however i have a html loading screen on my site and the menu always appears on top of the screen and while the screen is loading, this is the only thing that appears on top everything else is fine, i have put this to the people on the xara forums and the opinion is that its probably the JS file that the menu is using that is telling it to appear on top. i was wondering what i should look for to determin this problem or if someone could take a look at it for me? i'll upload the JS here and see if anyone can help. my site is at www.pcevo.co.uk however you need to CTRL + F5 to refresh wihtout the cache to see the loading screen if you are on a fast connection.
I'm still struggling for a solution here. I have a background image that auto-resizes based on browser window / screen resolution. I want my top header menu, which requires links, to act in the same way and be in roughly the same position/size based on browser window. Is this possible? In the sample below, the image is just part of the background image to give you an idea of the look I am trying to duplicate. Is there a Javascript out there that will help me or will I be stuck having to rework my design? http://www.uberbotjones.com/sanny/test.html This site is really driving me crazy. I have a drop down menu and an image slider that both use javascript code to function. The image slider appears right below the menu but when the actual menu drops down, the drop down part of the menu goes behind the image slider. How do I make it so that the menu drops above the image slider and not behind it? Hello All, I am trying to find a solution for this ..... kindly help incase you know.... I need a drop down menu to appear when I left-click an image.... have tried a lot but failed... Please help me out on this Thanks in advance,,, Regards I'm a complete newbie so please excuse me if this is obvious. I'd like to have a drop down menu that pops up a small new window with an image. So for, every attempt results in the image appearing in a new tab instead of a small, pop up style window. Here's my form <select name="parms"> <option value="AirTemp.jpg">AirTemp</option> <option value="Humidity.jpg">Humidity</option> <option value="Windspeed.jpg">Wind Speed</option> </select> Many thanks. I saw this on the web the other day and didn't mark the page I found it on. How do I change an image based on what selection is made in a drop down? Kathy I have added "Swap Image" into a page which already has a Drop Down Menu. However the Drop Down Menu stopped working. I know I have to remove the last line from the Drop Down Script ...window.onload=startList;... and integrate it into the <body tag> but I can't seem to figure it out. Someone please help... Below is the script for the drop down menu. // JavaScript Document startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; Here is the page I'm trying to work with. http://sigautoparts.com/home-test.htm I have a problem with a drop down menu showing behind image slider (not flash), as the menu shows up behind the large image slider, and was hoping someone can help me: http://bedrockstoneanddesign.com/ It only happens in FireFox..... any help is appreciated. thanks Is there an easy way of creating one file with the website menu code that is used on each page of a website? At present I use frames which work well except search engines don't direct through the frameset so only the content is loaded not the menu. Thanks in advance I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it... I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same.... My live demo is here! Thank you for any help and/or advice in advance, Best Regards, Tim I am asking a pretty simple question, but you got to start learning somewhere, you know! Anyway, I have implemented a script that resizes images into small thumbs on the left side of a page and shows the full size image on the right when the user click on a thumb. It works well. However, I have a possible 10 thumbs on theleft and my database that feeds this does not always have 10 images. Since I re-use the page for mutiple listings, I need to find a way to disable the broken image link for listings that don't have 10 thumbs. I have attached a picture of what it looks like. Here is the script: Code: #jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float:left; display: block; height:60px; width:60px; overflow:hidden; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { height:60px; width:auto; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
</style>
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<script type="text/javascript">
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
enlargedImg = document.createElement('img');
document.getElementById('jgal').parentNode.insertBefore(enlargedImg,document.getElementById('jgal').nextSibling);
enlargedImg.src = li[0].getElementsByTagName('img')[0].src;
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].style.backgroundRepeat = 'no-repeat';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
enlargedImg.src = this.getElementsByTagName('img')[0].src;
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
And then my list basically looks like this: Code: <ul id="gallery">
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb5']; ?>" alt="<?php echo $row_WADAitems['ItemDesc5']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb6']; ?>" alt="<?php echo $row_WADAitems['ItemDesc6']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb7']; ?>" alt="<?php echo $row_WADAitems['ItemDesc7']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb8']; ?>" alt="<?php echo $row_WADAitems['ItemDesc8']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb9']; ?>" alt="<?php echo $row_WADAitems['ItemDesc9']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb10']; ?>" alt="<?php echo $row_WADAitems['ItemDesc10']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb11']; ?>" alt="<?php echo $row_WADAitems['ItemDesc11']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb12']; ?>" alt="<?php echo $row_WADAitems['ItemDesc12']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb13']; ?>" alt="<?php echo $row_WADAitems['ItemDesc13']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb14']; ?>" alt="<?php echo $row_WADAitems['ItemDesc14']; ?>"></li>
</ul>
So as you can see, if I don't have an image in the database that it pulls from, I get that icon for a broken image link. How can I remove that icon so it doesn't show the no image icon? Many thanks! Hi, I'm using greybox for the first time, and it seems there's something buggy in my javascript. Have a look he http://www.bpope.com/TEST/portfolio/indexTEST.html The links are actually image maps on different areas of the "book." Click on any of the six to bring up a greybox slide show. My problem is the images often don't appear, but if you then navigate past that image and then back, it invariably shows up. I'm not proficient in javascript, but have been around long enough that when a problem as inconsistent as this happens, it's often because of some sort of conflict in code. I've looked for other similar posts and have found none. After banging my head against this for most of the afternoon, I'm hoping someone will see what I'm missing here. Thanks! B trying to find a example of when you hover over a image, text appears on the bottom so it could be a picture of a dog, whne you put your mouse over it, text will show in the picture (ie* transparent background for text so it's readable) anywhre where I can find a example of this???? Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser Hi. So, I have this loop I run to retrieve wallposts with php. Within this loop, I want a link/button on every post that says "comment". When the user clicks the comment link I want a comment field and post button to appear on the post I clicked on. The problem is that when I've tried making a link that does this, it only drops down the comment field on the most recent wallpost regardless of which wallpost I click on. I'd appreciate some help, a lot! i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch. can any one guide me i am new to programming Thanks in advance!!! How do I show the default icon for pdf, doc, etc... else show the image? Code: Show the default icon for pdf, doc, etc... else show image. Default icon: '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' + The image: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0"></a>' + Attempted javascript onError but only certain browsers support that or it's my code. Code: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0" onerror="this.src=images/icons/' + sIcon + '.gif"></a>' + Any ideas? Hi Im trying to make a dropdown menu like IGN has on his site with the following javascript code. The only problem however is I can't seem to hide the menu when a user clicks outside the menu. This is a bit frustrated because when a user wants to hide the menu again the need to reclick the menu header. Is there anyway I could solve this problem? Also a explanation about the code would be helpfull im not used to work with javascript. Also this is the code I have so far which works to onclick hide and show the menu. javascript: PHP Code: function toggle(id) { var el = document.getElementById(id); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } HTML: PHP Code: <a href="#top" onclick="toggle('view_user-options');";>Panel</a> <div id="view_user-options" style="display:none;"> <div class="nav_option"><a href="">my test</a></div> </div> Also if anyone knows how to do it plz combine it with my code so it works. I always get in trouble with javascript when combining two codes in one. Note: plz don't give me solution with tons of code I just want a verry simple solution. |
|||||||