Toggle triangle ► ▲ on dropdown jQuery [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
What would be the best way to toggle ► triangle to ▲ on dropdown (without using images)?
<div class="box-heading">
<a href="javascript:void(0);" id="switch-filters">
<span>►</span> Možnosti filtrovania</a>
</div>
$( "#switch-filters" ).click(function() {
$(".filter_group[filtertype!='p']").toggle();
});

You could use toggleClass and define the triangle in CSS3 with the pseudo tag :before
CSS
.box-heading > a:before{
content: "▲";
}
.box-heading > a.active:before{
content: "►";
}
jQuery
$(".box-heading > a").click(function(){
$(this).toggleClass("active")
});

you could use CSS.. so when you click on the a tag, you add a class to the a tag.. say a class called clicked and then have a CSS rule associated with that class
a.clicked span {
transform: scale(1) rotate(90deg) translate3d(0,0,0);
/* transform for IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand')";
zoom:1;
}
then CSS will rotate the span 90 degrees making the left arrow become a down arrow
browser compatibility
http://caniuse.com/#search=transforms
also link to CSS Matrix Rotation Calculator:
http://www.boogdesign.com/examples/transforms/matrix-calculator.html
:)

Use a Ternary expression
$(".filter_group[filtertype!='p']").is(":visible") ? $(this).next("span").text("▲") : $(this).next("span").text("►")

Using jQuery to replace the html of your span
Something like :
$('span').text('▲');

Related

Problems with the sticky div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
fixed div through position:sticky and after scrolling navbar which is fixed overlaps div. How can this be fixed?
Navbar from bootstrap
I am new to frontend, so I used only padding, but it does not look nice, everything is not flat in relation to other blocks
I am new to frontend, so I used only padding, but it does not look nice, everything is not flat in relation to other blocks
You can use z-index property in CSS, imagine you have 2 divs, div-1 which has it's position sticky and and div-2
the code would be:
.div-1 {
position: sticky;
z-index: 0;
}
.div-2 {
z-index: 1;
}
I didn't understand what you want please write your code here, before that try the code below and see its work or not
* {
padding:0;
margin:0;
box-sizing: border-box;
}
#your-id-name-for-navbar{
z-index:99;
}

JQuery/Javascript/CSS icon shrinking when de-hovered [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have three social icons which grow when hovered (css element:hover) - I want them to shrink slowly to the initial size when user stops hovering them - how could I solve it with Javascript, CSS or jQuery?
You can use CSS alone to achieve this via the transition property, no Javascript required.
.icon {
font-size: 2em; // assuming the icons are font-based. Use height/width otherwise
transition: font-size 0.3s;
}
.icon:hover {
font-size: 4em;
}
Working example
Well, jQuery has a handy-dandy function set called .mouseenter() and .mouseleave() that I'm sure you've heard of :).
You obviously know how to get the elements to grow, so for them to shrink I would reverse what you've done and decrease the size after .mouseleave() Something like this, I think, would work:
$(document).ready(function(){
$('your_element_here').on('mouseleave', function(){
$(this).animate({height: '20px', width: '20px'}, 500);
});
});
Only you'd replace the '20px''s with whatever height and width you want the icon to shrink down to. I hope this helps and I would be glad to expand on this as much as you need so comment if you need anything else.

how to flip the X for all elements including video/div/iframe? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I applied -webkit-transform: scaleX(-1);, but its only applying into video element and ignoring all the other elements such as div, image, iframe.
Assuming by flip you mean mirror, use:
body {-webkit-transform: scaleX(-1);}
Fiddle
If you mean rotate 180°, use:
body {-webkit-transform: rotate(180deg); }
Fiddle
Both of these will mirror/rotate everything within the <body> tag. If you want to only do it to specific elements, apply a class to those elements:
// css
.mirrored {-webkit-transform: scaleX(-1);}
// html
<div class="mirrored">Hello World</div>
Fiddle

.stop() breaks the fadein and the yellow box doesn't appear proper [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
If I most over the red box quickly and leave the cursor over the red box, it simply stops fading in and breaks the operation in half. If I don't use the .stop() function at all, jquery tries to finish the remaining operations (that I hovered and quit the box quickly before) Does anyone know what I should do here? Thanks.
http://jsfiddle.net/dkLhC/1
$(document).ready(function(){
$(".box1").mouseenter(function(){
$(".box2").stop().fadeIn();
});
$(".box1").mouseleave(function(){
$(".box2").stop().fadeOut();
});
});
JSFiddle
JQuery function fadeTo() also seems to work like css transitions, but transitions are undoubtedly better choice.
$(document).ready(function(){
$(".box1").mouseenter(function(){
$(".box2").stop().fadeTo(1000, 1);
});
$(".box1").mouseleave(function(){
$(".box2").stop().fadeTo(1000, 0);
});
});
This is not a direct answer to your problem, but an alternative solution. Instead of jQuery, you can use CSS transition to do the fade in and out
.box2
{
opacity: 0;
transition: opacity 2s;
}
.box1:hover + .box2 {
opacity: 1;
transition: opacity 2s;
}
See JSFiddle
Use .finish():
DEMO
$(document).ready(function(){
$(".box1").mouseenter(function(){
$(".box2").finish().fadeIn();
});
$(".box1").mouseleave(function(){
$(".box2").finish().fadeOut();
});
});
After some research I found that the correct answer is
true, false (for the parameters clearQueue, jumpToEnd)
http://jsfiddle.net/q6d57/11/
$(document).ready(function(){
$(".box1").mouseenter(function(){
$('.box2').stop(true, false).fadeIn(3000);
});
$(".box1").mouseleave(function(){
$('.box2').stop(true, false).fadeOut(3000);
});
});

When using ToggleClass how do I overwrite CSS? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
Code:
$(document).ready(function () {
$('.button').click(function () {
$('.button').toggleClass('active');
});
});
CSS:
.button {
background-color: red;
}
.active {
background-color: green;
}
The JQuery works but the CSS of .button overwrites the css of .active. What can I do so that .active is taking precedence when it's active? I don't want to apply !important. Any other way?
You could take a look at the .removeClass class, you can therefor remove an active class when your click event is triggerer. You can then use the .addClass function to add a selected css class.
You could check the currently selected class and change depending on the situation. Maybe not the best approach but it should work.
You should also take a look at .on, .on can prevent troubles when it comes to constructing and working with the DOM, recommended notes.
$('.button').on("click", function () {
//...
});

Categories