Changing bootstrap icon position when clicked - javascript

First, I'm very new to bootstrap so try to bear with me on this one. I've been working on a website that has a bootstrap sidebar I'm trying to get working right. I've seen other examples of this but I'm not sure what to do.
On the sidebar, I am using an <i> element icon before each item which in this case is toggle icon-chevron-right. What I would like to do is when someone clicks on an item on the sidebar, revealing the sub-items, the icon will change to toggle icon-chevron-right to toggle icon-chevron-down.
I have played around with some JavaScript trying to get it working but to no avail. Any insights would be helpful.

You could use a sprite with both your right and down arrows in then use CSS to toggle between the two by adjusting the background position.
Like:
element {
background: url(images/whatever.png) no-repeat;
}
element:active {
background: url(images/whatever.png) no-repeat 10px 10px;
}
play around with the position until you have it right

You can change the class on the icon, when the <a> clicked:
$('a').click(function () {
var icon = $(this).find('i');
if (icon.hasClass('icon-chevron-down')) {
icon.removeClass('icon-chevron-down').addClass('icon-chevron-right');
}
else {
icon.removeClass('icon-chevron-right').addClass('icon-chevron-down')
}
});

Related

Customizing responsive navbar

it is my first time using flex and I tried to make a responsive navbar and it is success in a way. Things I want to do:
Make the hamburger icon turn to X with smooth transition.
Make the menu opening with smooth slide down transition (instead of instant showing).
Add [ border-bottom: 1px solid black; ] to .social-icons when the menu is opened (active).
Add [ border-radius: 0; ] to .social-icons ul li:first-child when the menu is opened (active).
I've tried many things, watched many tutorials but I can't make it. Here is the code:
Help will be much appreciated.
You can not expect people to finish your code off, especially when it is something simple as HTML & CSS.
First of all I am going to explain it how you can accomplish 3rd and 4th problem that you have.
When you click hamburger icon to show menu, it adds 'active' class name to 'navbar-links'.
Therefore you need to make something like this to accomplish what you want.
.navbar-links.active .social-icons{
...your style goes here..
}
How this works is that you are selecting elements that have both navbar-links and active as their class names. After that selector you are selecting child elements that have social-icons class name.
To make smooth animations when you open menu and when it resizes, I recommend you looking into w3schools tutorial where you can see how animations work.
Just add animation to hamburgers class name and as soon as it gets that class name it will make an animation that you designed.
Look at it this way, when you declare animation for a class, as soon as an element gets that class it will run an animation.
For instance you can do something like this :
CSS :
.toggle-button{
opacity: 0.5;
color : white;
}
.active_toggle_button{
animation : customAnimation 0.5s linear forwards;
}
#keyframes customAnimation {
to{
opacity: 1;
color : green;
}
}
And in your Javascript :
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active');
toggleButton.classList.toggle('active_toggle_button');
})
This will toggle "active_toggle_button" class to your hamburger when you click it. As soon as it adds this class to your hamburger it will do the animation.
As I said, look into the link I gave you from w3schools. This is just general idea to let you know how it actually works.

can't change hover color on image/icon

I created a circle icon and added an image in the center. I wan't the image to change colors on hover. The only real part of the icon is the circle. I have tried adding hover in the code for the circle icon like:
.circle-icon a:hover {
color: #0cf;
background-image:url(../images/phone-icon-blue-sm.png)}
So in the above I am attempting to swap out the image on hover and trying to change the color by adding a line to the style sheet. I am not sure that I can even do what I want without creating a rollover using javascript, which I am not thrilled about. The demo page is at:
http://tahoe-luxury-properties.com/index2.html
The icon that I am having trouble with is the phone link at the bottom right of the page. The facebook, linked in icons are working great. Just not my home made icon. I might have some code that I can use, but need to search that out. Any help, ideas are greatly appreciated. Thanks, Beth
You can't set a new img src via CSS.
Or you use two background's, or two img's tags (one hidded, that show on hover and hide the other).
/* hide second image, hide first on hover */
#social-icon-menu a em > img:last-child, #social-icon-menu a:hover em > img:first-child {
display: none;
}
/* show second on hover */
#social-icon-menu a:hover em > img:last-child {
display: block;
}
By the way, I noticed that your theme contains FontAwesome, is much better using it, because it's a font icon, so you can just change his color, using color property via CSS.

jQuery Flip front to 2 different backsides

I am having trouble getting a certain feature to work.
As you can see here: https://jsfiddle.net/y5jn4tco/1/
<div> CHECK CODE AT JSFIDDLE</div>
I am using the flip jquery plugin which made a flip, where you choose a category, and then gets sent to a certain login screen. My issue is, that I want the bottom one to flip to another backside. I have tried altering the jquery plugin, but without luck. Is there anyone who knows how I could make this work?
So the pink one goes to the pink login, and the blue one goes to the blue login.
Thank you in advance!
You Need To Wrap Your Div int Another Div Then Flip Back Div To Front And Front To back
1 div Is A
2 div is B
A-> 1
Student
2 Company
B -> 2 Buttons
IF Click In btn1 Then Hide company and Flip
$("#centerModuleCompany").css('display','none');
$("#centerModuleStudent").css('display','block');
IF Click In btn1 Then Hide Student and Flip
$("#centerModuleCompany").css('display','block');
$("#centerModuleStudent").css('display','none');
I Wrap The Student And Company Into Main Div I Also rotate Main Div#centerMain Front And Back
Then If You Clicked In Student Then Company Form Hide And Student Display In Div#centerMain
If You Clicked In Company Then Student Form Hide And Company Display In Div#centerMain
And I Change #back To .back
I Solve This In Fork Try This
https://jsfiddle.net/ehab6sqs/
Made some changes to your document.ready function as below:
Here is the DEMO
$(document).ready(function(){
$(".cards").flip({
trigger: 'manual'
});
$("#loginStudent").click(function(){
$(".cards").flip(true);
$("#centerModuleStudent").css('display','block');
$("#centerModuleCompany").css('display','none');
});
$("#loginCompany").click(function(){
$(".cards").flip(true);
$("#centerModuleCompany").css('display','block');
$("#centerModuleStudent").css('display','none');
});
$("#back1,#back2").click(function(){
$(".cards").flip(false);
});
});
I noticed that you have same ids for back button which is violating DOM element rules so I've changed it to back1 and back2 respectively and I am just hiding the alternative div on click of each button and showing the required div
Your CSS changes:
#back1,#back2 {
position: absolute;
left: 10px;
top: 10px;
height: 20px;
cursor: pointer;
}

Using CSS Sprites as Buttons & jQuery

my partner gave me a job to do because he wants me to learn jQuery. I'm making a section of our landing page that has three buttons that replace the content for each button. I've got that down (at least the basic function) but I need some help getting the sprites to toggle on when clicked and also toggle off when another button is clicked.
I'd like the first button to be on its active state (class .des1activecontent) when the page initially loads, and to switch when the other buttons are clicked.
Here is the jsfiddle of my most recent attempt at getting the buttons to style correctly. Having trouble with class selectors.
NOTE: Look at the jsfiddles please, I only posted this from it because it's required for me to post this.
$('#linkwrapper div a').on('click', function(){
var lmb = this+"activecontent";
$('#linkwrapper div a').removeClass(lmb);
$(this).addClass(lmb);
});
http://jsfiddle.net/HTHnW/86/
And here is the jsfiddle of the whole plugin so you can have a better understanding of what I'm doing. Thanks again in advance.
http://jsfiddle.net/89F9H/
You can add multiple classes to any DOM element, and style them in CSS:
.des3.activecontent {
background-position: 0 -375px;
}
.des1.activecontent {
background-position: 0 -250px;
}
.des2.activecontent {
background-position: 0 -625px;
}
JS:
$('#linkwrapper div a').on('click', function () {
var lmb = "activecontent";
$('#linkwrapper div a').removeClass(lmb);
$(this).addClass(lmb);
});
http://jsfiddle.net/mblase75/HTHnW/87/

Making an image change once it is clicked

I’ve already spent hours looking at as many online resources and stackoverflow questions as I can find but for some reason I just can’t figure this out.
I’m attempting to use CSS and image sprites to make a link display as an image that changes once it is hovered over and once it has been clicked. I’ve played round with CSS and looked at JavaScript for far too long now and I just need some direction on how to get it working.
I’ve managed to make it change once its hovered over however what i really need to do is have the image change once it is clicked. So the begin with it displays the play button and when its clicked it displays a pause button, click it again and it displays the play button etc.
From what i can gather i will need to use JavaScript and an onclick event. However I’m not sure how this would work or how to use it with image sprites.
My CSS so far looks like this
.testclass .stratus {
background-position: -1px -1px;
width: 21px;
height: 21px;}.
.testclass .stratus:hover {background-position: -1px -29px; width: 21px; height:
21px;}.
However this only effects the play button and when it is hovered over. Now i need a way to display the pause button when the play button is clicked and vice versa.
Image sprites URL.
http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png
URL of page im trying to get this to work on.
http://www.priceofmilk.co.uk/uncategorized/ddd-2
Can this be achieved using CSS and HTML or will I also need to use some JavaScript? Any assistance would be much appreciated.
I made a simple example. I use background colors and an anchor but you can easy implement this in your situation.
update
Updated the code so it uses your images.
HTML
<a class="play_pause">PLAY</a>​
CSS
.play_pause {
display: block;
width: 24px;
height: 23px;
text-indent: -99999px;
background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png);
cursor: pointer;
}
.playing {
background-position: -27px 0;
}
.playing:hover {
background-position: -27px -28px !important;
}
.play_pause:hover {
background-position: 0 -28px;
}​
And the JS:
$(document).ready(function() {
$(".play_pause").click(function() {
$(this).toggleClass('playing');
});
});​​
​
JsFiddle example
If you only wanted to detect the first click, you could do this in pure CSS by giving the link an id and using the :target pseudoclass (e.g. a#theid:target {...})
But since you need to detect a second click, you'll need to use JS to toggle between CSS classes. The basic way is to use an event handler:
document.getElementById('theid').onclick = function(){
this.className = this.className=='play' ? 'pause' : 'play';
};
You will have to use JavaScript to accomplish the switching, there is no way to accomplish such logic with pure CSS.
The easiest way to go would be to have two classes play and pause. Through CSS you declare which part of the sprite you want to show for each of those classes. Then you attach a click-event listener to the element with JavaScript, and in the click-event callback you remove class play from the element and apply class pause instead, and vice versa.
MDN has a good article on how to attach event-listeners to an element. And this SO question discuss how you can add/remove classes on an element.
That is simple where have you read?
jQuery('.testclass .stratus').click(function{
jQuery(this).toggleClass('played');
})
css:
.played{
background-position: -1px -29px;
}
Example using .querySelectorAll and .addEventListener, with your current sprite. No jQuery is used.
var elm = document.querySelectorAll('.testclass .stratus'), i = elm.length, e;
while (e = elm[--i])
e.addEventListener('click', function () { // this fn generates the listener
var pause = false; // captured in scope, not global
return function () { // this is the actual listener
this.style.backgroundPositionX = (pause = !pause)?'-20px':'0px';
}
}(), false); // the () invokes the generator

Categories