I have a grid of images and I'd like to toggle an animation when each image is clicked. This function sets x = true for all of the images, how do I ask it to just effect the img which has been clicked?
var x = false
$('img').click(function(){
if (x == false) {
$(this).animate({border: '5px'});
x = true;
}
else {
$(this).animate({border: '0px'});
x = false;
}
});
Thank you .
Here is the fiddle for the above : http://jsfiddle.net/m79fB/
Jquery methods to addClass , removeClass and hasClass can be used here to easily solve the problem ,
CSS :
.add-border {
border:5px solid red;
}
Javascript/jquery :
$('img').click(function() {
var borderClass = $(this).hasClass('add-border') ; // returns true or false
if(!borderClass)
$(this).addClass('add-border');
else
$(this).removeClass('add-border');
});
Here is the fiddle http://jsfiddle.net/hearsid/489hW/
Related
I want to filter my Data Array by different categories. It is working, but it should pick the rows of multiple categories. if multiple checkboxes are checked. How can I implement this code?
Here is my code:
check_cells = function() {
var values = [];
if (document.getElementById("checkbox_pouch").checked == true) {
values.push('pouch');
}
if (document.getElementById("checkbox_18650").checked == true) {
values.push('18650');
}
if (document.getElementById("checkbox_21700").checked == true) {
values.push('21700');
}
if (document.getElementById("checkbox_pouch").checked == false && document.getElementById("checkbox_18650").checked == false && document.getElementById("checkbox_21700").checked == false) {
values.push('empty');
}
if (values.length > 0) {
view.setRows(data.getFilteredRows([{
column:2,
test: function (value) {
return (values.indexOf(value) > -1);
}
}]));
}
dashboard.draw(view, drawOptions);
}
else {
view.setRows(data.getFilteredRows([{column:2}]));
dashboard.draw(view);
}
}
var view = new google.visualization.DataView(data);
var drawOptions = {
showRowNumber: false,
allowHtml: true,
};
// Inititial Draw of the dashboard.
dashboard.draw(view, drawOptions);
when filtering on multiple values,
you will need to combine those into one filter setting.
the data view will not let you have multiple filters on the same column.
in this case, you can use the test callback function, rather than the value key.
here, an array is used to gather the values,
and the test callback to filter the column...
check_pouch = function() {
var values = [];
if (document.getElementById("checkbox_pouch").checked == true) {
values.push('pouch');
}
if (document.getElementById("checkbox_18650").checked == true) {
values.push('18650');
}
if (values.length > 0) {
view.setRows(data.getFilteredRows([{
column:2,
test: function (value) {
return (values.indexOf(value) > -1);
}
}]));
}
dashboard.draw(view);
}
I'm trying to present a UI of a title/less window when a mouse leaves a window's title or contentview, but not when moving from one to the other; in essence have the two tracking areas function as one (I resorted to this as I couldn't figure out how to create a single area when the title view is hidden):
override func mouseEntered(with theEvent: NSEvent) {
let hideTitle = (doc?.settings.autoHideTitle.value == true)
if theEvent.modifierFlags.contains(.shift) {
NSApp.activate(ignoringOtherApps: true)
}
switch theEvent.trackingNumber {
case closeTrackingTag:
Swift.print("close entered")
closeButton?.image = closeButtonImage
break
default:
Swift.print(String(format: "%# entered",
(theEvent.trackingNumber == titleTrackingTag
? "title" : "view")))
let lastMouseOver = mouseOver
mouseOver = true
updateTranslucency()
// view or title entered
if hideTitle && (lastMouseOver != mouseOver) {
updateTitleBar(didChange: !lastMouseOver)
}
}
}
override func mouseExited(with theEvent: NSEvent) {
let hideTitle = (doc?.settings.autoHideTitle.value == true)
switch theEvent.trackingNumber {
case closeTrackingTag:
Swift.print("close exited")
closeButton?.image = nullImage
break
default:
Swift.print(String(format: "%# exited",
(theEvent.trackingNumber == titleTrackingTag
? "title" : "view")))
let lastMouseOver = mouseOver
mouseOver = false
updateTranslucency()
if hideTitle && (lastMouseOver != mouseOver) {
updateTitleBar(didChange: lastMouseOver)
}
}
}
Additionally, there's a tracking rect on the close button to appear only when over. Anyway, from my tracer output I see the issue - mouse over window from beneath to over its title:
view entered
updateTitleBar
**view entered**
view exited
updateTitleBar
title entered
updateTitleBar
title exited
Note sure why I'm getting a second view entered event (view entered), but the movement out of the view and onto the adjacent title each triggers an updateTilebar() call which is visually stuttering - not remedied so far with animation:
fileprivate func docIconToggle() {
let docIconButton = panel.standardWindowButton(.documentIconButton)
if settings.autoHideTitle.value == false || mouseOver {
if let doc = self.document {
docIconButton?.image = (doc as! Document).displayImage
}
else
{
docIconButton?.image = NSApp.applicationIconImage
}
docIconButton?.isHidden = false
self.synchronizeWindowTitleWithDocumentName()
}
else
{
docIconButton?.isHidden = true
}
}
#objc func updateTitleBar(didChange: Bool) {
if didChange {
Swift.print("updateTitleBar")
if settings.autoHideTitle.value == true && !mouseOver {
NSAnimationContext.runAnimationGroup({ (context) -> Void in
context.duration = 1.0
panel.animator().titleVisibility = NSWindowTitleVisibility.hidden
panel.animator().titlebarAppearsTransparent = true
panel.animator().styleMask.formUnion(.fullSizeContentView)
}, completionHandler: {
self.docIconToggle()
})
} else {
NSAnimationContext.runAnimationGroup({ (context) -> Void in
context.duration = 1.0
panel.animator().titleVisibility = NSWindowTitleVisibility.visible
panel.animator().titlebarAppearsTransparent = false
panel.animator().styleMask.formSymmetricDifference(.fullSizeContentView)
}, completionHandler: {
self.docIconToggle()
})
}
}
}
So my question is about how to defer the actions when areas are adjacent.
They (titlebar & content view) are not siblings of each other so didn't think a hitTest() was doable but basically if I could tell if I was moving into the adjacent tracking area, I'd like it to be a no-op.
Any help with why animation isn't working would be a plus.
Not a true answer, but if you know the adjacent view's rect you can use the event's location to probe whether you'd want to ignore movements among adjacent views:
override func mouseExited(with theEvent: NSEvent) {
let hideTitle = (doc?.settings.autoHideTitle.value == true)
let location : NSPoint = theEvent.locationInWindow
switch theEvent.trackingNumber {
case closeTrackingTag:
Swift.print("close exited")
closeButton?.image = nullImage
break
default:
let vSize = self.window?.contentView?.bounds.size
// If we exit to the title bar area we're still "inside"
// and visa-versa, leaving title to content view.
if theEvent.trackingNumber == titleTrackingTag, let tSize = titleView?.bounds.size {
if location.x >= 0.0 && location.x <= (vSize?.width)! && location.y < ((vSize?.height)! + tSize.height) {
Swift.print("title -> view")
return
}
}
else
if theEvent.trackingNumber == viewTrackingTag {
if location.x >= 0.0 && location.x <= (vSize?.width)! && location.y > (vSize?.height)! {
Swift.print("view -> title")
return
}
}
mouseOver = false
updateTranslucency()
if hideTitle {
updateTitleBar(didChange: true)
}
Swift.print(String(format: "%# exited",
(theEvent.trackingNumber == titleTrackingTag
? "title" : "view")))
}
}
I need help on executing an one-liner if statement on my data-bind
this is the HTML
<div data-bind="text: Fields.FieldDescription, click:function() { $root.selectedToListRule.push(Fields.FieldCode());}" onmousedown="this.style.backgroundColor='#4BA6FF'"></div>
this is the js code
var RemovefieldCodeRule = function (parent, data) {
//console.log(parent.InitiatorFields(), data.selectedApproverFields());
var sel = selectedToListRule();
//console.log(sel);
for (var i = 0; i < sel.length; i++) {
var selCat = sel[i];
var result = data.selectedApproverFields.remove(function (item) {
return item.FieldCode() == selCat;
});
if (result && result.length > 0) {
//Add to WorkflowObject - InitiatorFields
var obj = dataservice.getEmptyObjects("WorkFlowObjectFields");
obj.done(function (data) {
var wfo = model.genericObject(data);
wfo.ID(result[0].ID);
wfo.WorkFlowObjects_ID(parent.ID());
wfo.FieldCode(result[0].FieldCode());
wfo.FieldDescription(result[0].FieldDescription());
parent.InitiatorFields.push(wfo);
});
}
}
selectedToListRule.removeAll();
parent.InitiatorFields.sort(function (left, right) { return left.FieldDescription() == right.FieldDescription() ? 0 : (left.FieldDescription() < right.FieldDescription() ? -1 : 1) });
data.selectedApproverFields.sort(function (left, right) { return left.FieldDescription() == right.FieldDescription() ? 0 : (left.FieldDescription() < right.FieldDescription() ? -1 : 1) });
}
on my data-bind, there's a click event wherein i will need to select from the dynamically generated div. what i want to happen is when the user clicks on a certain div (it gets selected) and if the user changes his mind to unselect the div he previously selected.
How can i can achieve this on one-liner if statement using knockout
I'm trying to put a Control into an existing div but I don't really know where or how I can force the map.addControl method to show the control (it is a draw control by the way) within an already existing div on the map. I'm using the leaflet draw plugin by the way.
My html looks something like this:
<div class="tooldiv" ng-controller="ClientState">
...
</div>
tooldiv is where the control should be placed.
This is my leaflet config:
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
position: 'topleft',
draw: {
polyline: false,
polygon: {
title: 'Draw a sexy polygon!',
allowIntersection: false,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
},
showArea: true
},
circle: false,
rectangle: false,
marker: false
},
edit: false
});
// Add and remove DrawControl menu when layer is selected/unselected
this.toggle_layer_edit = function(edit_polygon) {
if (edit_polygon === true) {
if (draw_control_check === null) {
draw_control_check = map.addControl(drawControl);
}
} else {
if (draw_control_check !== null) {
map.removeControl(drawControl);
draw_control_check = null;
}
}
}
While searching for an answer I got the idea that it might not even be possible?
I think you should try overwriting the draw control's onAdd method.
Here's some untested pseudo code (I'm not sure if the assignment & call of the original onAdd method do work like this):
var drawControlOnAdd = drawControl.onAdd;
drawControl.onAdd = function (map) {
var $toolDiv = angular.element('.tooldiv');
var originalDiv = drawControlOnAdd(map);
$toolDiv.html(originalDiv);
return $toolDiv[0];
}
HTH
When I expand the Sitecore content tree and when the vertical scroll bar appears for the content tree, and if I scroll down and select an item in the bottom of the tree, it scroll to top.
This only happens in Firefox, IE10, IE9, Chrome it works fine.
I did the Sitecore upgrade very recently. Has anyone encountered similar issue? Please help!
Sitecore.NET 6.6.0 (rev. 130404)
Firefox versions - 21,22
I have had a similar issue and contacted Sitecore support about it. They provided me with the following solution that works for us:
- open \sitecore\shell\Controls\Gecko.js
- replace at line 668
scBrowser.prototype.resizeFixsizeElements = function() {
var form = $$("form")[0];
this.fixsizeElements.each(function(element) {
var height = form.getHeight() - element.scHeightAdjustment + "px";
element.setStyle({ height: height });
});
/* trigger re-layouting to fix the firefox bug: table is not shrinking itself down on resize */
scGeckoRelayout();
}
by:
scBrowser.prototype.resizeFixsizeElements = function() {
var form = $$("form")[0];
if (!form) {
return;
}
this.fixsizeElements.each(function (element) {
if (!element.hasClassName('scFixSizeNested')) {
element.setStyle({ height: '100%' });
}
});
var maxHeight = 0;
var formChilds = form.childNodes;
for (var i = 0; i != formChilds.length; i++) {
var elementHeight = formChilds[i].offsetHeight;
if (elementHeight > maxHeight) {
maxHeight = elementHeight;
}
}
var formHeight = form.offsetHeight;
this.fixsizeElements.each(function (element) {
var height = element.hasClassName('scFixSizeNested')
? (form.getHeight() - element.scHeightAdjustment) + 'px'
: (element.offsetHeight - (maxHeight - formHeight)) + 'px';
element.setStyle({ height: height });
});
/* trigger re-layouting to fix the firefox bug: table is not shrinking itself down on resize */
scGeckoRelayout();
}
Thanks to Sitecore support, found the issue,
The issue occures due to Fixefox refreshes html controls as soon as some property was changed. Upon selecting an item, a content tree panels width is changed and as a result it is redrawn. Developed workaround forbids changing of the controls size for static controls for Firefox (like content tree). An aftermath might be incorrect window resizing (changing height of the browser window) in Firefox. To implement the workaround please replace an exicting one under the path 'Website\sitecore\shell\Controls\Gecko.js' with attached one and clear browser cache. Please notify us with the results.
scBrowser.prototype.resizeFixsizeElements = function() {
var form = $$("form")[0];
if (!form) {
return;
}
if (!this.isFirefox)
{
this.fixsizeElements.each(function (element) {
if (!element.hasClassName('scFixSizeNested')) {
element.setStyle({ height: '100%' });
}
});
var maxHeight = 0;
var formChilds = form.childNodes;
for (var i = 0; i != formChilds.length; i++) {
var elementHeight = formChilds[i].offsetHeight;
if (elementHeight > maxHeight) {
maxHeight = elementHeight;
}
}
var formHeight = form.offsetHeight;
this.fixsizeElements.each(function (element) {
var height = element.hasClassName('scFixSizeNested')
? (form.getHeight() - element.scHeightAdjustment) + 'px'
: (element.offsetHeight - (maxHeight - formHeight)) + 'px';
element.setStyle({ height: height });
});
}
/* trigger re-layouting to fix the firefox bug: table is not shrinking itself down on resize */
scGeckoRelayout();
}