I need to a a following button like this example
What i should write in java script?
$('.following').hover(function(){
$(this).text("Unfollow");
},function(){
$(this).text("Following");
});
//for toggle the class following/follow When click
$('.following').click(function(){
$(this).toggleClass('following follow').unbind("hover");
if($(this).is('.follow')){
$(this).text("Follow");
}
else{
//binding mouse hover functionality
$(this).bind({
mouseleave:function(){$(this).text("Following");},
mouseenter:function(){$(this).text("Unfollow");}
});
}
});
what changes need to have bootstap button?
You can do this in CSS like so: http://jsfiddle.net/Th4th/
.follow {
width: 100px;
height: 40px;
background-color: gray;
}
.follow:hover span {display:none;}
.follow:hover:before {
content: "Unfollow"
}
I don't think you'll need java script for the button changing, only for taking the action of the click.
Related
I am currently trying to add a custom JS function (via the Live Code Editor Plugin) to my wordpress website. The goal is to change the background colour of a toggle after click (i.e. from red -> green). I have tried this function but although the selector works for CSS, the JS function is not working:
CSS:
\23 toggle-id-1 {
background-color: red;
}
JS:
var \23 toggle-id-1 = document.getElementById("\23 toggle-id-1");
\23 toggle-id-1.onclick = function(){
\23 toggle-id-1.style.backgroundColor = "green";
}
In JSFiddle this worked without any problems, is there anything different for this plugin?
Thank you!
jQuery solution:
$("#toggle-id-1").click(function () {
$(this).toggleClass("green");
});
#toggle-id-1 {
background-color: red;
height: 100px;
width: 100px;
}
#toggle-id-1.green { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle-id-1" class=""></div>
You can't have spaces in variable names. Name your variable something else.
This is frustrating and I can't figure this out.
I just need to change/toggle back/foreground color
for the entire body when user clicks on a link, 'theme'.
Following is my html file.
...
<style>
highlight {
background-color: black;
color: white;
}
</style>
<script>
$(document).ready(function () {
$('.theme').on('click', function () {
$(document.body).toggleClass("highlight");
//$(document.body).css({"background-color": "black"});
});
});
</script>
When I use $().css({...}), it works but when I try to use
class to be able to toggle, it doesn't. Please help.
Agree with Rayon. "highlight" in the style is not a class if missing the period in front. jQuery is not able to toggle the "highlight" class since there's no "highlight" class to toggle. The code works here: http://liveweave.com/T6c7Mz
change the following line
$(document.body).toggleClass("highlight");
with
$("body").toggleClass("highlight");
This will work
HTML
Click Me
CSS
body { background-color:red; }
.highlight
{
background-color:yellow;
}
JQUERY
$("#theme").click(function() {
$("body").toggleClass("highlight");
});
Here is the working code
http://jsfiddle.net/CLwE5/119/
When I click on it changes background. It works fine. But what if I want to click on it again to restore the original background? I have this code:
jQuery(document).ready(function($) {
$(".select").on("click", function () {
$(this).css("background-image", "url(images/selected.png)");
});
});
Here is jsfiddle EXAMPLE
Basically when I click on the div it changes the background, which is fine. But I want to have ability to click on it again to restore the original background.
It will be an alternative solution for tick box, but just for demo purposes.
Thanks
JS
replace
$(this).css("background-image", "url(images/selected.png)");
with
$(this).toggleClass("active");
Style
#multiselect .active {
background-image: url('...');
}
Fiddle http://jsfiddle.net/09xgrhxo/4/
Instead of using .css() to change the background-image I would add a class in your CSS and use .toggleClass().
Also be aware that simply adding a class will not be specific enough because your css is using:
#multiselect .select
you're going to have to target the class you add as a child of #multiselect:
#multiselect .change
CSS
#multiselect .change{
background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}
JS
$(".select").on("click", function () {
$(this).toggleClass("change");
});
FIDDLE
You could use data-* attribute.
$('.select').attr('data-img', $('.select').css('background-image'));
$(".select").on("click", function() {
$(this).css("background-image", ($(this).css('background-image') == $(this).data('img')) ? "url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});
#multiselect .select {
background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
width: 250px;
height: 100px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="multiselect">
<div class="select">Option1</div>
<div class="select">Option2</div>
<div class="select">Option3</div>
</div>
Instead of writing background-img url in javascrpt, I would suggest to create two classes having same properties but different background-img url which you want to toggle. so here we will be toggling class (ultimately background-img) in javascript.
see jsfiddle [example][1]
[1]: http://jsfiddle.net/09xgrhxo/13/
When I click on the icon, I want it to be switched on/off.
In my html file I have:
<div class="startSharing"></div>
And in my js:
$('.startSharing').click(function() {
$(this).removeClass('startSharing');
$(this).addClass('stopSharing');
});
$('.stopSharing').click(function() {
$(this).removeClass('stopSharing');
$(this).addClass('startSharing');
});
It works fine when switching from on to off - but I don't understand why it still goes into "startSharing" section when it is turned off.
Thank you for help.
In this case, you're setting the handlers to the particular elements. Once they're set - they're set, regardless of the selector changing.
You could just define it on the .startSharing element, if they all start like that. Then, you could use .toggleClass() to easily switch them on/off:
$('.startSharing').click(function() {
$(this).toggleClass('startSharing stopSharing');
});
You may also delegate the click event like this:
$('body').on('click', '.startSharing', function() {
$(this).removeClass('startSharing').addClass('stopSharing');
});
$('body').on('click', '.stopSharing', function() {
$(this).removeClass('stopSharing').addClass('startSharing');
});
Doing it this way will also allow dynamically-generated to trigger events. In your case, .stopSharing was generated dynamically.
use event delegation
$('#container').on('click',".startSharing,.stopSharing",function(){
$(this).toggleClass('startSharing').toggleClass('stopSharing');
});
#container div {
width: 250px;
height: 100px;
}
.startSharing {
background-color: green;
}
.startSharing::after {
content: "start sharing";
}
.stopSharing {
background-color: red;
}
.stopSharing::after {
content: "stop sharing";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="startSharing"></div>
</div>
I have a link called "Navigation" I want the link colour to change as I click on it and stay changed. For example: Default colour is blue. When I click on the link it goes to another tab and the color turns to green and it should remain green.
here is the code so far:
<style type="text/css">
a.specialAnchor
{
font-size: 1em;
text-align: right;
padding: 10px;
padding-right: 15px;
color: #0066FF;
}
a.specialAnchor:link
{
color: #0066FF;
}
a.specialAnchor:visited
{
color: Green;
}
a.specialAnchor:hover
{
color:Orange;
text-decoration:underline;
}
a.specialAnchor:active
{
color: Green;
text-decoration:underline;
}
<asp:LinkButton ID="Navigation" runat="server" BorderStyle="None" CssClass ="specialAnchor"
PostBackUrl="~/navigation.aspx">Navigation</asp:LinkButton>
This does not give me the results I want Please help.
Basically my webpage looks a something like this:
there are four tabs: A, Navigation, C, D
And in all those four tabs there are links at the bottom of the page.
When you are on A and you click on Navigation link, it will take you to Navigation page. What I want is to change the colour of the link when it is clicked on or visited.
Thank you
Have you tried changing the color of the visited pseudo class to green? Try that and see if works the way you want?
Ok, given that you have a link like this
<a class="spec" href="wherever">Link</a>
You need styles like this
<style type="text/css">
.spec:link {color:#FF0000;} /* unvisited link */
.spec:visited {color:#00FF00;} /* visited link */
.spec:hover {color:#FF00FF;} /* mouse over link */
.spec:active {color:#0000FF;} /* selected link */
</style>
Done on the tryit editor at w3schools :)
If changing your :visited pseudoclass doesn't give you what you want, try changing the style onclick with jQuery:
$('a.specialAnchor').click(function() {
this.style.color = 'green';
}
Try something like this
$(document).ready(function () {
$('.changecolor').click(function () {
$(this).css("color", "red");
});
});
<a class="changecolor">Click To Change</a>
If you need to change the color back to what it was, you can use .toggle()