i have simple application which should work on keyboard events like onfocus and onblur instead of onmouseover and onmouseout.
here is my code snippet to zoomin/zoomout:
<script>
var nW,nH,oH,oW;
function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage)
{
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge))
{
nW=iWideSmall;nH=iHighSmall;
}
else
{
nW=iWideLarge;nH=iHighLarge;
}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
calling this function in this way:
<td align=center valign=middle >
<figure>
<button style="background-color:black; height:160px;width:160px ; border:none"><img src="F:\rashmi\icons_tv\Help_Normal.png" onfocus="zoom('57px','120px','96px','136px',this);"
onblur="zoom('57px','120px','57px','120px',this);" > </button>
<figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font></figcaption>
</figure>
</td>
but problem is when i select image using tab key i cant see any zoomin/zoomout effect. if i replace onfocus/onblur with onmouseover/onmouseout respectively it works well.
please some one help me where i am going wrong.
regards
rashmi
You will not get focus on an img element by tabbing but on the button element instead. Move your onblur/onfocus events to the button element. This will change your button's size each time you focus/lose focus on it, but it will not change your image size. What you have to do then is to modify your code so the change is mapped on the button's contained image dimensions as well. Something that I can think of right now is
<script type="text/javascript">
var nW,nH,oH,oW;
function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichElement)
{
theImage = whichElement.firstChild;
theImage.style.width=nW;theImage.style.height=nH;
oW=whichElement.style.width;oH=whichElement.style.height;
if((oW==iWideLarge)||(oH==iHighLarge))
{
nW=iWideSmall;nH=iHighSmall;
}
else
{
nW=iWideLarge;nH=iHighLarge;
}
whichElement.style.width=nW;whichElement.style.height=nH;
theImage.style.width=nW;theImage.style.height=hH;
}
</script>
Here, the first child of the button element, which happens to be the image, takes the same height and width with the button, whenever that changes.
Related
I have a button in my page
<button onclick="document.getElementById('donation').style.visibility='visible'">Support</button>
That I want to have linked to making a hidden div (donation) visible. I'm not sure if the getElementById works with divs, but I couldn't find out either, because when I changed the Id to h1, with a simple color change for style, it didn't work either.
Is there a problem with my button or syntax?
You can still work this with an inline onclick.
Andrei is correct about the id needing to be an individual.
<button onclick="document.getElementById('donation').style.visibility='visible'">Support</button>
<div style="background-color: gray; width: 50px; height: 50px; visibility: hidden;" id="donation"></div>
Technically though, it's better to keep your css and javascript in the head tag or outside of the html.
In order for document.getElementById('donation') to return a DOM element this condition would need to be true
there should be one html element and only one with id="donation" in your page. For example: <div id="donation"></div>
It's possible that your function works flawlessly (you can easily tell if it is by looking at your browser console after you pushed the button) but your element would still remain not visible. For example, if its display property is set to none. There are many possible reasons why an element might not be rendered by the browser. The fastest way to pinpoint the reason would be for you to create a minimal, complete and verifiable example (using the <> button) where we could experience the issue.
For me, I think separating the codes will keep things clearer and readable.
<button id="donation_btn">Support</button>
The javascript
function enableDonation( button, donationElement ) {
// check if the button is defined
if ( button != undefined
&& button != null ) {
button.addEventListener( "click", function () {
donationElement.style.display = "block";
});
}
// execute the code on document load
window.addEventListener( "load", function () {
enableDonation(
document.getElementById( "donation_btn" ),
document.getElementById( "donation" )
);
});
I want to create a custom "X" close or hide button, image, text that works for a complete element box in wordpress. I've attached a sample image of the "x" on something else. For my site however I need it to control the whole element or (tiles) on my page not just the single box of text.
Sample image
This is a easy task for you, basically on this situation what you have to do is create the "x" graphic with any iconfont or you can use the "X" from any font(like a regular x that you just have to touch your keyboard) then what you have to do is follow this example.
HTML
<div class="yourbox">
<!--- THIS IS THE BOX THAT YOU WANT TO CLOSE, you can use id or clas whatever you want-->
<p> text or content of the box <p>
<a id="close"href=""> X </a>
</div>
CSS
.yourbox{
height:100px;
width:400px;
background-color: red;
}
JS
<script type="text/javascript">
$(function() {
$("#close").click(function () {
$( "#yourbox" ).css( "display", "none" );
});
});
</script>
You could name the function as you want, use class instead of id and basically the code will hie the div after you touch the " X ".
[Note: this flaw only occurs in Internet Explorer 11. It is fine in IE9, Chrome and Firefox.]
I have the following Css:
/*** pop-up div to cover entire area ***/
.divModalDialog {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*! important !*/
display:none;
/* last attribute set darkness on scale: 0...1.0 */
background-color:rgba(0,0,0,0.8);
text-align:center;
z-index:101;
}
/*** ! target attribute does the job ! ***/
.divModalDialog:target { display:block; }
An Html:
<div id="divModalDialogUpdate" class="divModalDialog">
<div>
<input type="text" id="divModalText" />
<button onclick="doStuff();">Press</button>
</div>
</div>
<div id="divCanvas" style="display: none; width:100%; height: 100%;">
<canvas id="m_Canvas" width="200" height="200" oncontextmenu="return false;"></canvas>
</div>
As you can see, I am using the divModalDialog as a Modal Dialog Box which appears over the canvas div.
On the canvas div, a game is running. When I need to fire up the modal dialog I pause the game and then have the code:
window.location = "#divModalDialogUpdate";
The person enters some stuff in the text box, clicks the button which triggers the onclick event which runs the function doStuff(). Within doStuff() is the following line of code which returns to just the canvas div being visible:
window.location = "#";
This works all great.
Now the problem. The game state is paused, and my prefered key to toggle the pause state is the Space key. (Any other key and things would be fine, but the problem is I want to use the space key).
So I tap the space key and this is (unwantedly) triggering the onclick event of the button in the modal dialog div again (even though the modal div is no longer visible) which obviously calls the doStuff() function again.
How do I stop the space key triggering the Modal Div's button onclick event when the Modal Div is no longer visible?
You could use a global variable ignore before any logic in doStuff(), e.g.,
function doStuff() {
if(ignore == true) return;
/* logic here ... */
}
Then change your other code to something like:
ignore = false;
window.location = "#divModalDialogUpdate";
and
ignore = true;
window.location = "#";
There might be a way to do this using event.stopPropagation() but I could not find a way to make that work.
http://jsfiddle.net/3ypYW/
<div class="service1"><p>Option 1</p></div>
I have created a simple div with a hover feature that I'd like to convert into a radio button to be part of a form. I am well versed in forms and divs and CSS and JQuery but I have no idea how, if possible, I could tie them all together to create a radio button that would obviously stick green when selected.
Thanks!
try this:
in your css add a class for the checked style, it could be the same as the hover.
.service1:hover, .checked { background:#66ff99; color:#000; }
add a js call to your link and don´t forget the "#" to stay on page:
<a href="#" onclick="check(this)">...
finally define the js function which adds the .checked class to the div:
<script type="text/javascript">
function check(element) {
d = element.firstChild;
d.className = d.className + " checked";
}
</script>
In my site, I would like to implement a textbox where people can input a set of strings separated by a separator character.
For example the tags textbox at the bottom of this page: tags(strings) delimited by space(separator).
To make it more clear to the user, it would make a lot of sence to give each string a different background color or other visual hint.
I don't think this is possible with a regular input[text] control.
Do you deem it possible to create something like that with javascript? Has somebody done this before me already? Do you have any other suggestions?
Basic Steps
Put a textbox in a div and style it too hide it.
Make the div look like a text box.
In the onClick handler of the div, set the input focus to the hidden text box.
Handle the onKeyUp event of the hidden text box to capture text, format as necessary and alter the innerHtml of the div.
Tis quite straightforward. I'll leave you to write your formatter but basically you'd just splitString on separator as per the Semi-Working-Example.
Simple Outline
<html>
<head>
<script language="javascript" type="text/javascript">
function focusHiddenInput()
{
var txt = document.getElementById("txtHidden");
txt.focus();
}
function formatInputAndDumpToDiv()
{
alert('Up to you how to format');
}
</script>
</head>
<body>
<div onclick="focusHiddenInput();">
Some label here followed by a divved textbox:
<input id="txtHidden" style="width:0px;" onKeyPress="formatInputAndDumpToDiv()" type="text">
</div>
</body>
</html>
Semi-Working Example
You still need to extend the click handlers to account for tag deletion/editing/backspacing/etc via keyboard.... or you could just use a click event to pop up another context menu div. But with tags and spacer ids identified in the code below that should be pretty easy:
<html>
<head>
<script language="javascript" type="text/javascript">
var myTags=null;
function init()
{
document.getElementById("txtHidden").onkeyup= runFormatter;
}
function focusHiddenInput()
{
document.getElementById("txtHidden").focus();
}
function runFormatter()
{
var txt = document.getElementById("txtHidden");
var txtdiv = document.getElementById("txtBoxDiv");
txtdiv.innerHTML = "";
formatText(txt.value, txtdiv);
}
function formatText(tagText, divTextBox)
{
var tagString="";
var newTag;
var newSpace;
myTags = tagText.split(' ');
for(i=0;i<myTags.length;i++) {
newTag = document.createElement("span");
newTag.setAttribute("id", "tagId_" + i);
newTag.setAttribute("title", myTags[i]);
newTag.setAttribute("innerText", myTags[i]);
if ((i % 2)==0) {
newTag.style.backgroundColor='#eee999';
}
else
{
newTag.style.backgroundColor='#ccceee';
}
divTextBox.appendChild(newTag);
newTag.onclick = function(){tagClickedHandler(this);}
newSpace = document.createElement("span");
newSpace.setAttribute("id", "spId_" + i);
newSpace.setAttribute("innerText", " ");
divTextBox.appendChild(newSpace);
newSpace.onclick = function(){spaceClickedHandler(this);}
}
}
function tagClickedHandler(tag)
{
alert('You clicked a tag:' + tag.title);
}
function spaceClickedHandler(spacer)
{
alert('You clicked a spacer');
}
window.onload=init;
</script>
</head>
<body>
<div id="txtBoxDivContainer">
Enter tags below (Click and Type):<div id="txtBoxDiv" style="border: solid 1px #cccccc; height:20px;width:400px;" onclick="focusHiddenInput();"></div>
<input id="txtHidden" style="width:0px;" type="text">
</div>
</body>
</html>
Cursor
You could CSS the cursor using blink (check support) or otherwise just advance and hide as necessary an animated gif.
This is quite interesting. The short answer to your question is no. Not with the basic input element.
The real answer is: Maybe with some trickery with javascript.
Apparently Facebook does something close to this. When you write a new message to multiple persons in Facebook, you can type their names this sort of way. Each recognized new name is added a bit like an tag here and has an small cross next to it for removing it.
What they seem to do, is fake the input area size by drawing an input-looking box and removing all styling from the actual input with css. Then they have plenty of logic done with javascript so that if you have added an friend as a tag and start backspacing, it will remove the whole friends name at once. etc.
So, yes, it's doable, but takes plenty of effort and adds accessibility problems.
You can look how they do that at scripts like TinyMCE, which add such features to textareas. In textareas you can use HTML to colorize text.
You can use multiple textboxes
textbox1 <space> textbox2 <space> textbox3 ....
and so on... You can then apply the background-color style to each textbox.