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>
Related
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 ".
Im trying to put :focus on div so it will focus with other colors when href link is clicked, is it possible ?? Any help would be appreciated.
Below are my current progress
eg: Fiddle Demo
Expected result, when click on the href link, it will focus on the div background (like hover do).
i have no idea how to convert this to javascript
$("#colOne ul li").click(function(){
$("#colOne ul li").removeClass("active");
$(this).addClass("active")
})
You need li action so you need to use Either Jquery or Javascript.
Use following JavaScript will solve your issue.
HTML:
<div id="colOne">
<h3>Fruit</h3>
<div class="bg1">
<ul>
<li class="litest">Apple</li>
<li class="litest">Orange</li>
<li class="litest">Banana</li>
</ul>
</div>
</div>
Javascript:
<script language="javascript">
var buttons = document.getElementsByClassName("litest");
for(var i = 0; i < buttons.length; ++i){
buttons[i].onmousedown = function() {
this.setAttribute("class", "active");
}
}
</script>
You can use this.classList.toggle('active'); instead of this.setAttribute("class", "active"); to add and remove effect.
Check Fiddle.
If you like to use JQuery use following JQuery code:
$(function(){
$("li").bind("click", function(){
$(this).addClass('active');
});
});
Edit:
Here i edited my fiddle as per your requirement.
Check Fiddle.
It sounds like you want an event listener on your li's, not a :focus pseudo class. If you set up a couple classes to reflect the colors you want, you can just switch between them on click. I suggest jQuery's toggleClass to get this done.
I'm working on a one single page navigation system; Is there is a way to change the <title> of a page when a div is :target (#divname in url)?
EDIT: Yeah, sorry, a Jquery/javascript solution works as well.
If the url contains #somePage, use #somePage as a selector and retrieve it's data-title value.
Then set <title></title> as that value. location.hash produces #somePage
$('a').click(function(event){
event.preventDefault();
if(location.hash) {
var newPageTitle = $(location.hash).data('title');
$('title').text(newPageTitle);
}
});
Add a data attribute to your div and set it's value to what the page title should be when that link is clicked.
Some Page
<div id="somePage" data-title="This Is The Page Title"></div>
It can be done in following way:
Assume that you have this html element:
<a onclick="onClick1()" href="#test">
link
</a>
and you have this scripts:
<script>
function onClick1(){
setTimeout(onClick,100);
}
function onClick(){
alert(1);
if(document.URL.indexOf("#test")>=0){
document.title = "Your title";
}
}
</script>
then you'll get on click what you need.
Here is example.
i am using toggle buttons in my application, i would like to set the backgound-color when the button is pressed.
how can i know what is the proper attribute?
and in general is there any place that i can know which CSS attribute has which effect on the HTML element?
If you are using GWT ToggleButton, then you may
import com.google.gwt.user.client.ui.ToggleButton;
final ToggleButton tb = new ToggleButton( "my button text" );
if (tb.isDown()) {
tb.addStyleName("pressed"); // or tb.setStyleName("pressed");
}
and in your css file:
.pressed { background-color: blue; } /* any color you want */
Another way - to change just background of this given button:
tb.getElement().getStyle().setProperty("background", "green");
I know GWT is similar to jQuery, but I've never used it... with jQuery I'd do this (I wasn't sure what kind of button tag you were using, so I included both):
CSS
input, button {
background-color: #555;
color: #ddd;
}
.clicked {
background-color: #f80;
}
HTML
<button type="button">Click Me</button>
<input type="button" value="Click Me" />
Script
$(document).ready(function(){
$('button, :button')
.mousedown(function(){ $(this).addClass('clicked') })
.mouseup(function(){ $(this).removeClass('clicked') })
.mouseout(function(){ $(this).removeClass('clicked') });
})
and in general is there any place that i can know which css atribute has which effect on the HTML element?
Yes, http://www.w3schools.com/css/ has most of what you will probably need. Check the left column for the CSS-property you're looking for.
Regarding your first question, I you can just use the btn:active, btn:hover, btn:visited properties. (i.e. your button has the class/id 'btn'.)
Good luck
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.