I am very much new to html, css, javascript, jQuery. I want to show tooltip depending the button. Button while showing Play icon it should show 'Run' as tooltip and when Stop icon is showing it should show 'Stop' as tool tip. This code is part of HTML template
<div class='btn-group'>
<button class='btn btn-inverse playstop' rel='tooltip'
data-original-title='Run><i class='icon-play'></i></button>
</div>
In the script for one condition i have
$(".icon-stop", $this.element).attr("data-original-title", "Run");
$(".icon-stop", $this.element).removeClass("icon-stop").addClass("icon-play");
and for other condition i have
$(".icon-play", $this.element).attr("title", "Stop");
$(".icon-play", $this.element).removeClass("icon-play").addClass("icon-stop");
I have edited to show a full html of a button which changes its text when clicked from Stopped to Running. The tooltip displayed is also changed on click
<html>
<head>
<meta charset="ISO-8859-1">
<title>TestingStuff</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$("#aBtn").click(function(){
if($("#aBtn").html() == "Stopped"){
$("#aBtn").html("Running");
$("#aBtn").attr("title","Running");
}
else{
$("#aBtn").html("Stopped");
$("#aBtn").attr("title","Stopped");
}
});
});
</script>
<body>
<div>
<button id="aBtn" title="Stopped">Stopped</button>
</div>
</body>
</html>
I'm not really sure why you need a tooltip that displays the text on a button, but, here's an inelegant, brute force FIDDLE for you to consider. You can play around with the text anyway you want.
JS
$('.playbutton').html('STOP');
$('.tooltip').html('STOP');
$('.playbutton').on('click', function(){
if ( $('.playbutton').html() == "PLAY" )
{
$('.playbutton').html('STOP');
$('.tooltip').html('STOP');
}
else
{
$('.playbutton').html('PLAY');
$('.tooltip').html('PLAY');
}
});
$('.playbutton').hover(
function(){
$('.tooltip').css('display', 'block');
},
function(){
$('.tooltip').css('display', 'none');
}
);
Related
I use execCommand('bold') to make the following text bold, but when I try it again to disable bold, then add other label like 'h' or something, It add extra label link this:
<h1><span style="font-weight: normal;">111</span></h1>
I wonder how to avoid this?
It should works
First of all if you really doing it correctly, it won't happen like that.
Please see the sample below, it should works.
document.designMode = "on";
function myFunction(event) {
if (event.keyCode == 16) {
// Press shift btn exec cmd for bold trigger
document.execCommand("bold");
//check in alert box when triggered
//alert( document.getElementById("thebody").innerHTML );
//check the updated code in console once triggered
console.log( document.getElementById("thebody").innerHTML );
}
}
<!DOCTYPE html>
<html>
<body onkeydown="myFunction(event)">
<div id="thebody">
<h1>Exec execCommand("Bold")</h1>
<p>Try to exec by pressing shift btn once highlighed</p>
<h2>Again execCommand("Bold")</h2>
<p>Select some text in this page, and press the SHIFT button to make the selected text toggle between bold and normal.</p>
</div>
<div id="preview">
</div>
</body>
</html>
Note/Advise:
However, if your problem persists in your version of code, please share with me the function that trigger this exec Cmd.
javascript code is just like this:
Editor.setHeading = function(heading) {
if(heading == 0){
document.execCommand('formatBlock', false, '<div>')
} else {
document.execCommand('formatBlock', false, '<h'+heading+'>');
}
}
Editor.setBold = function() {
document.execCommand('bold', false, null);
}
html is:
<body>
<div id="editor" contenteditable="true"></div>
<script type="text/javascript" src="editor.js"></script>
</body>
I am trying to add a slide effect to my toggle script
<script>
function clickitems() {
// action 1
if( document.getElementById('spoiler2').style.display=='none' ){
document.getElementById('spoiler2').style.display='block';
}
else{
document.getElementById('spoiler2').style.display='none';
};
// action 2
if( document.getElementById('spoiler').style.display=='block' ){
document.getElementById('spoiler') .style.display='none';
}
}
</script>
But so far without success, can anyone help me out ? Much appreciated
The elements spoiler and spoiler2 are simple div elements
<div id="spoiler" style="width:300px;height:100%;display:none;"> Txt and image Content</div>
<div id="spoiler2" style="width:300px;height:100%;display:none;"> Txt and image Content</div>
The buttons are <a class="button" onclick="clickitems()">Items</a>
And yes i could have gone with a paragraph tag instead of a link
Ok, so far i got this,
A JavaScript to close the other and Jquery open element while toggling the selected element
<script>
function clickitem() {
if( document.getElementById('spoiler').style.display=='block' ){
document.getElementById('spoiler') .style.display='none';
}
}
</script> </p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#spoiler2").slideToggle("slow");
});
});
</script>
I'm trying to implement, what I thought would be a simple click, load, slideDown scenario. But I can't get the slideDown part to display.
I have the following two buttons:
<div>
<fieldset id="btn">
<input class="databasebtn" type="submit" name="nameDatabaseBtn" id="db1" data-id=1" VALUE="DB1"/></br>
<input class="databasebtn" type="submit" name="nameDatabaseBtn" id="db2" data-id="2" VALUE="DB2"/></br>
</fieldset>
</div>
I then have the following jQuery:
$(document).ready(function()
{
$('.databasebtn').on('click',function()
{
$(this).append("<div id='btnlist'></div>");
$('#btnlist').slideDown("200",function()
{
$('#btnlist').load("test78b.php");
});
})
});
The idea being that I click the button, I append the #btnlist div to the button, and fill the new div with the contents of test78b.php, which should generate a list of checkboxes.
It all works fine, except that I can't see the checkboxes. If I look at the code in the background it is all there, it just wont show up.
If I include 'test78b.php' separately it displays as expected.
Is there something I am missing?
You can not append div to a button, you can append div to a parent in this case fildset with this code
<script type="text/javascript">
$(document).ready(function() {
$('.databasebtn').on('click',function(){
$(this).parent().append("<div id='btnlist'></div>");
$('#btnlist').slideDown('slow',function(){
$('#btnlist').load("your page");
})
})
});
</script>
or you can use insertBefore to append div before butoon clicked with this code
<script type="text/javascript">
$(document).ready(function() {
$('.databasebtn').on('click',function(){
$("<div id='btnlist'></div>").insertBefore($(this))
$('#btnlist').slideDown('slow',function(){
$('#btnlist').load("your page");
})
})
});
</script>
or append div to the body tag with this other code
<script type="text/javascript">
$(document).ready(function() {
$('.databasebtn').on('click',function(){
$("<div id='btnlist'></div>").appendTo('body')
$('#btnlist').slideDown('slow',function(){
$('#btnlist').load("your page");
})
})
});
</script>
and then, for a correct html code,you shouldn't have multiple items on the same page with the same id. The div added via script should not have id btnlist but class="btnlist"
DEMO http://jsfiddle.net/TWQbD/4/
$('.databasebtn').on('click',function() {
$(this).next('.databasetext').append("<div class='btnlist'>test78b.php</div>");
$(this).next('.databasetext').find('.btnlist').last().slideDown("1000");
});
Umm guys i got stuck in Jquery when i was fiddling along with some animation The thing was i wanted to make a textbox appear and show the text when a button is highlighted like a gallery ummm ..... . Anyway i made halfthrough but the text is not displaying . so any help...
P.s the idea was to have a button/circle glow and a text to appear below it
like when one button/circle glows an empty space below shows the text associated with it.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function slide()
{//slide start
$(".textHold").hide()
.delay(1000)
.queue(
function()
{//queue function start
$(".red").css(
{//css start
"background-color":"#000"
}//css end
);//css ();
$(this).dequeue();
}//queue function/\
);//queue();
$(".textHold").fadeIn(500);
$(".textr").fadeIn(500).fadeOut(5000).delay(500);
$(".textHold").fadeOut(500).delay(500);
$(".textHold")
.queue(
function ()
{
$(".red").css({"background-color":"#f00"});
$(this).dequeue();
}
)
.delay(500)
.queue(
function()
{
$(".blue").css({"background- color":"#000"});
$(this).dequeue();
}
)
.fadeIn(500);$(".text").fadeIn(500).delay(500).fadeOut(500).delay(500);
$(".textHold").fadeOut(500).delay(500);
$(".textHold").queue(
function()
{
$(".blue").css({"background-color":"#00f"});
$(this).dequeue();
}
);
}//slide() /\
setInterval(function(){slide();},500);
</script>
</head>
<body>
<div class="red">
</div>
<div class="blue">
</div>
<div class="textHold">
<span class="text">Hello blue</span>
<span class="textr">Hello Red</span>
</div>
</body>
It seems to me that the code to change the style for the button is under your control (not a third party code). In this case, you can trigger a JQuery custom event when button changes color. There would be a listener to this event which will according make the text appear.
See: http://www.sitepoint.com/jquery-custom-events/
Consider this snippet:
<div>
<span style="color:red;">a</span>
<span style="color:blue;">a</span>
<span style="color:white;">a</span>
</div>
How can you remove style from selected by user text?
Edited: to add clarifications from OP:
Thank you for your answers!
I had to be more precise. Sorry for that.
What do I mean by "selected by user text": selected/highlighted with mouse.
I have many divs with spans inside(just like it is below-no extra ids,classes for spans:/).
[...]
<div>
<span style="color:red;">a</span>
<span style="color:blue;">b</span>
<span style="color:white;">c</span>
</div>
<div>
<span style="color:red;">d</span>
<span style="color:blue;">a</span>
<span style="color:white;">a</span>
</div>
[...]
What I would like to achieve: user selects with mouse "ab", click button(input type=button) which remove style from selected span/spans. Similar behavior like it is in TinyMCE.
I'm not sure what you mean by "selected by user text", but if you mean that you want the user to be able to click on the text to remove its color, you could do it this way with jQuery:
Try it out: http://jsfiddle.net/v24fZ/
$(function() {
$('div > span').click(function() {
$(this).removeAttr('style');
});
});
Note that this will affect all <span> elements that are a child of a <div>, so better would be to place an ID attribute on the <div> to make sure you have the right one.
Try it out: http://jsfiddle.net/v24fZ/1/
<div id="myID"><span style="color:red;">a</span><span style="color:blue;">a</span><span style="color:white;">a</span></div>
then
$(function() {
$('#myID > span').click(function() {
$(this).removeAttr('style');
});
});
Also note that this will remove all inline styles. If you only want to remove the color, then do this:
Try it out: http://jsfiddle.net/v24fZ/2/
$(function() {
$('#myID > span').click(function() {
$(this).css('color', '');
});
});
http://api.jquery.com/removeAttr/
http://api.jquery.com/css/
http://api.jquery.com/click/
"Remove style from selected by user text"
If you mean selecting by using a click event, it should be something like this:
var oldState = ""; //Code is untested, but I've written something similar recently
var $prevDiv;
$('#parentContainer span').click(function() {
if(!$(this).hasClass('selected')) //tracking what is currently selected.
{
if($prevDiv != null)
{
$prevDiv.removeClass('selected');
$prevDiv.attr('style', oldState);
}
$prevDiv = $(this);
$(this).addClass('selected');
oldState = $(this).attr('style');
$(this).attr('style', '');
}
else
{
//do nothing unless you need some reselected logic
}
}
I think #patrick dw covered the actual api for changing the attribute quite nicely, so I won't repeat it.
I totally agree with patrick.
You may want to try the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<span style="color:red;">a</span>
<span style="color:blue;">a</span>
<span style="color:white;">a</span>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("span").click(function(){
$(this).removeAttr("style");
});
});
</script>
</body>
</html>