I have a div containing two images which is wrapped with a hover event. These images are left and right arrows. When I hover on the right arrow, I need to change the opacity on the left arrow. The html code is:
<div class="arrows">
<img src="left-arrow.jpg" id="left" />
<img src="right-arrow.jpg" id="right" />
</div>
jquery code
$('.arrows img').hover(function() {
var imgId = $(this).attr('id');
if (imgId == "right") {
// change opacity on left arrow
$(this).parent().img.eq(0).css({"opacity" : .5}); // does not work
$('arrows img.eq(0)').css({"opacity" : .5}); // does not work
}
});
Any suggestion that I can try.
Try this:
$('.arrows img').hover(function() {
$(this).siblings().css({"opacity" : .5});
});
Edit:
If you are looking to gray out the left or right arrow based on first or last page do this:
On Hover:
$('.arrows img').hover(function() {
$(this).css({"opacity" : .5});
});
On Click:
$('.arrows img').click(function() {
$(this).css({"opacity" : .5});
});
Related
I cannot find an example to do this anywhere, although I could have sworn I've seen one in the past.
I want to add a button to a node in fancytree so that either on hovering over that node (or maybe on selecting it) the button displays (a white x on a red circle, for example) and clicking it will delete/remove that node. At all other times the delete button should be hidden for the node.
I've been unable to find any kind of example where a custom link or button is added to a fancytree node though - maybe it's not possible to do or I'm just using the wrong search terms?
Edit: I found a way to add a clickable button by appending html to the title string:
title: component.name() + "<span class='deleteButton'><a href='#' data-bind='click: myfunction'><img src='../../Content/images/deleteIcon.png' /></a></span>",
And by adding some custom css to my site file:
span.fancytree-node span.deleteButton {
display: none;
}
span.fancytree-active span.deleteButton {
margin-left: 10px;
display: inline-block;
}
But this adds the button to the title text and is therefore subject to the highlighting of the title when active. It would be better if there was a way to add this to the node OUTSIDE of the title text. Is that possible Martin?
$("#tree").fancytree({
source: [...],
renderNode: function (event, data) {
var node = data.node;
var $nodeSpan = $(node.span);
// check if span of node already rendered
if (!$nodeSpan.data('rendered')) {
var deleteButton = $('<button type="button" class="btn">delete node</button>');
$nodeSpan.append(deleteButton);
deleteButton.hide();
$nodeSpan.hover(function () {
// mouse over
deleteButton.show();
}, function () {
// mouse out
deleteButton.hide();
})
// span rendered
$nodeSpan.data('rendered', true);
}
}
});
I normally use css ':after' for such cases (https://developer.mozilla.org/de/docs/Web/CSS/::after).
If that is not enough, you can always tweak the markup in the 'renderNode' event.
I'm struggling with plugging in the correct selector into jquery. When I plug in ".accordionButton" the entire div is clickable and the functionality works great. However, I want to make only the "h3.toggle a" clickable, but plugging that selector in doesn't work. Is there something else in the jquery I need to change here? Any advice is greatly appreciated. Thanks!
The HTML:
<div class="accordionButton">
<div class="case-top">
<div class="case-left"></div>
<div class="case-right">
<h3 class="toggle">Our Strategy and Results</h3>
</div>
</div><!--end case-top-->
</div><!--end button-->
<div class="accordionContent">sliding content here</div>
The JQUERY:
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton h3.toggle a').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton h3.toggle a').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.accordionButton h3.toggle a').mouseover(function() {
$(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});
$('.accordionContent').hide();
});
You are using
$(this)
but you change the selector, you need to change all $(this) selectors to
$('.accordionButton')
FIDDLE
Ok, here is where I'm at... the buttons are now working correctly, but on click all the instances of .accordionContent open, not just next one. ( FYI, I removed the mouseover from this code snipped)
Jquery
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton h3.toggle a').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton h3.toggle a').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($('.accordionButton').next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON (correct)
$(this).addClass('on');
//OPEN THE SLIDE
$('.accordionButton').next().slideDown('normal');
}
});
I'm guessing the lines:
$('.accordionButton').next().slideDown('normal');
and
if($('.accordionButton').next().is(':hidden') == true) {
are the lines which need editing. I need these two lines to open and close just the "next" .accordionContent instances not all of the instances together.
When I click on a button, a Flyout will appear for confirmation on the top of the button I have just clicked on.
I tried this :
flyout.alignment="center"
but the alignment is by the button. I want to show my flyout in the center of my screen. I'm asking if this is possible with Winjs.UI.Flyout
Flyout is always aligned wrt to the element passed as the first parameter. If you need to have the flyout not aligned to the element but at the center of the screen, it can be done by placing an hidden element at the center of the screen and aligning the flyout to it.
_oncmdclick: function oncmdclick(event)
{
// assume an element with class hidden in the page and placed at center of the screen
var hiddenElement = this.element.querySelector('.hidden');
var myFlyoutElement = ...; // myFlyoutElement is the flyout element
this.newItemFlyoutElement.winControl.show(hiddenElement, 'top', 'center');
},
html:
<div class="hidden" style="visibility: collapse"></div>
css:
// in this case, I had used 1x1 -ms-grid for the section of the page
.mypage.fragment section[role=main] {
display: -ms-grid;
-ms-grid-rows: 1fr;
-ms-grid-columns: 1fr;
}
// center the hidden element in the page grid
.mypage.fragment section[role=main] .hidden
{
-ms-grid-column-align: center;
-ms-grid-row-align: center;
}
I need to handle multiple slide toggle for 2 different divs using jquery.
example: when I click a button, it should slideLeft the 1st div and at the same time it should expand the 2nd div covering the whole area of the 1st div.
Thanks in advance.
Here the piece of code I have used:
$(document).ready(function() {
$('#foo').click(function() {
$('#accordian').toggle("slide", 300);
if ($(this).val() == "Hide Menu"){
$(this).val("Show Menu");
$('#area').css({"max-width":"960px"});
}else{
$(this).val("<< Hide Menu");
$('#area').css({"max-width":"730px"});
}
});
I used the JScrollPane from http://jscrollpane.kelvinluck.com/ and modified it to hide the arrow key when scrolling at the end (top or bottom). When scrollbar is at the top, the arrowUp should disappear, showing only arrowDown at the bottom and appears again when scrolling down.
I've made the arrow image disappear at the top, but the problem is the scroll track does not change but just adds extra space equal to the size of the arrow image at the very bottom. How can I go around this, how do I change it so that when the arrow is hidden at one end, the jspTrack's height is adjusted as well, showing the other arrow on the opposite end without extra space?
if (settings.showArrows) {
if(isAtTop){
arrowUp.addClass('jspDisabled');
arrowUp.css('display', 'none');
}
else{
arrowUp.removeClass('jspDisabled');
arrowUp.css('display', 'block');
}
if(isAtBottom){
arrowDown.addClass('jspDisabled');
arrowDown.css('display', 'none');
}
else{
arrowUp.removeClass('jspDisabled');
arrowDown.css('display', 'block');
}
/*arrowUp[isAtTop ? 'addClass' : 'removeClass']('jspDisabled');
arrowDown[isAtBottom ? 'addClass' : 'removeClass']('jspDisabled');*/
}
Thanks all.
you can control it via css
<style>
.jspVerticalBar{
background:none;
}
.jspVerticalBar .jspArrow{
display:block;
}
.jspVerticalBar .jspDisabled
{
display:none;
}
</style>
JavaScript:
<script>
$('.pane').jScrollPane({showArrows:true});
</script>