For my portfolio site I have this idea where I would like the opacity of all thumbnails on the homepage increase and decrease automatically. So when the site is loaded, thumbnail 1 is briefly shown, shortly after it goes blank again, and the process continues with another thumbnail, for example thumbnail 6 and so on. Is there someone who has done this before or has any idea how to realize this idea?
Much appreciation for any comments!
your questions is a long script and need a lot of testing but I will give you some directions.
For time delay
var delay=1000; //1 second
setTimeout(function() {
//your code to be executed after 1 second
}, delay);
This is the easy part inside the {} you put the functionality you like.
Jquery has a neat trick for such tasks
.fadeTo( duration, opacity [, complete ] )
$( "#ID" ).fadeTo( "slow", 0.33 );
The only thing left is to make a loop that go trough all of your thumbs and fade them in and out.
Hope this helps.
Related
When you search for a keyword in VS Code, and it returns x results, as you start browsing among those results, the screen always centers vertically the active result on the screen. This may be useful in some situations, but in cases where I want to "frame" all my results in the same active screen, it's very annoying that it jumps the code, even by 2-3 lines...
OK, if in that viewable portion of the code there are no results, and I click on the next result, it'd make sense to bring me to the first one. But if let's say 4-5 results are already in the viewable portion of the code, I would like to set it so that it prevents that centering all the time. So is there such a setting?
I hope I explained it well enough so that you understand what I mean. TIA for any help.
I don't think that is configurable if the next find match is outside of the viewport. I see this in the code:
(https://github.com/microsoft/vscode/blob/7a0a293b38c353cd9773316a022d8f926d481715/src/vs/editor/contrib/find/browser/findModel.ts)
private _setCurrentFindMatch(match: Range): void {
let matchesPosition = this._decorations.setCurrentFindMatch(match);
this._state.changeMatchInfo(
matchesPosition,
this._decorations.getCount(),
match
);
this._editor.setSelection(match);
this._editor.revealRangeInCenterIfOutsideViewport(match, ScrollType.Smooth);
}
So revealRangeInCenterIfOutsideViewport() will always put the next find match into the center if it is not initially not in the viewport.
In the search code, there is the similar:
this.searchResultEditor.revealLineInCenterIfOutsideViewport(matchRange.startLineNumber);
So I would think there is no scrolling if the next serach result is already in view.
For me, there is no scrolliing at all if the next find match is anywhere in the viewport. Do you see some scrolling if it is at the very bottom, for example?
I am making a program that repeatedly creates pages of an undefined quantity, and on the top of all the pages is a logo that is in a certain position. If I have everything in a for loop and at the end I include these commands to make a page break:
Set oRng = oDoc.Bookmarks("\EndOfDoc").Range
oRng.InsertBreak
The second time (and subsequent times) the table I make goes on the the next page, but the image does not. I have tried setting the "top" property to
distFromTop + pageLength * pageNumber.
I would assume it might have to do with the anchor property, but I have no idea what data type that even gets or how it affects the placement
I insert the image using:
oDoc.Shapes.AddPicture "C:\Users\name\Desktop\file.jpg", , , CentimetersToPoints(1.3), CentimetersToPoints(0.9 + pageLength * j), CentimetersToPoints(6.1), CentimetersToPoints(2.9)
The picture adds multiple times, but both to .9 from the top on the first page and 1.3 from the left, on the first page.
How can I make the pic go .9 from the top of a certain page
EDIT: I would like to avoid putting it in a header because that would mess up the alignment of the other elements of the doc
Ok, So what worked for me was this:
Set oRng = oDoc.Bookmarks("\EndOfDoc").Range
oRng.InsertBreak
oDoc.Shapes.AddPicture "C:\Users\me\Desktop\file.jpg", , , CentimetersToPoints(1.3),
CentimetersToPoints(0.9), CentimetersToPoints(6.1), CentimetersToPoints(2.9),
oDoc.Bookmarks("\EndOfDoc").Range
I still don't quite understand why it works, because the documentation for a range objects / anchors was fairly hard for me to understand... I tried this out and this worked. For my purposes that worked, but if anyone knows why that works I would love to know
Thanks for your answers
I got a app that shows multiple pages, which are dragable. As the content of those can get very long I want to show only the page-name and limit the height of the page to about 50px on beginDrag() and reset the height to auto on endDrag(). Unfortunately this doesnt work, the styles get just ignored. I think this happends because react-dnd needs to keep the proportion of the elements so it can handle the drop-targets and knows which component is at which position. Is there any other way to accomplish this?
If you use a dragPreview then it will use that instead of the screenshot-ed component, similar to what he does in the tutorial (http://gaearon.github.io/react-dnd/docs-tutorial.html):
componentDidMount: function () {
var connectDragPreview = this.props.connectDragPreview;
var myPlaceholder = <Placeholder /> // A fake component with the height you want
myPlaceholder.onload = function() {
connectDragPreview(myPlaceholder);
}
}
(Note that you'll have to inject the connectDragPreview through the collector like he did as well)
I'm not quite sure I understand the problem but may be connectDragPreview can help you?
Some useful info here
Using the jQuery Fancybox plugin with Isotope, I'm trying to figure out how to update the Fancybox gallery order in lightbox view after I change the Isotope sort by options.
When I re-sort the images I need to be able to tell Fancybox what the new order is, so that when I navigate between images in lightbox view it goes to the next image in the newly sorted order. Right now the next/previous buttons take you to the next/previous image in the original sort order.
Any help is much appreciated.
With reference to this page, the relevant part looks something like this...
$('.option-set').change(function() {
var $this = $(this);
var delay = 1100; // approx 1 second delay after last input
clearTimeout($this.data('timer'));
$this.data('timer', setTimeout(function(){
$this.removeData('timer');
$('a[rel^="lightbox"]').each(function() {
var opacity = $(this).parent().css("opacity");
$(this).attr('rel','lightbox['+opacity+']');
});
Shadowbox.clearCache();
Shadowbox.setup();
}, delay));
});
It's a hack of course. Whenever one of the checkboxes is changed, this routine waits a bit to let isotope do its thing and then updates all 'rels' to correspond to the opacity of their respective parents. So there will actually be two sets of rels (lightbox[0] and lightbox[1]). But because there is no visible thumbnail for lightbox[0], those images are in effect removed from the lightbox/shadowbox.
I came across the same problem and looked around to find a solution and stumbled upon this as well. As I couldn't find a solution, I thought I'd try it myself and the solution was simple. Not sure if this has an affect on performance of the browser, but simple DOM manipulation will give you the required behavior. I'm using isotope V2 and events in this version is a bit different to that in V1. Fancybox version shouldn't matter.
First you have to make sure you have set isInitLayout: false when initializing isotope.
var $container = $("#isotopeContainer");
$container.isotope({
//other options
isInitLayout: false
});
After that, you have to bind to the layoutComplete event on your isotope container.
$container.isotope('on', 'layoutComplete', function(isoInstance, laidOutItems) {
var $firstItem = laidOutItems[0].element;
$($firstItem).prependTo(isoInstance.element);
var $lastMovedItem = $firstItem,$nextItem;
for (var i = 0; i < laidOutItems.length; i++) {
$nextItem = laidOutItems[i].element;
if ($nextItem != $firstItem) {
$($nextItem).insertAfter($lastMovedItem);
$lastMovedItem = $nextItem;
}
}
});
As you set isInitLayout to false while initializing isotope, you have to call the arrange method manually to lay it all out properly.
$container.isotope('arrange');
I'm pretty sure there is room for improvement. But I'm happy with this solution.
Hope someone will find this useful.
Came across the exact same issue tonight!
I suggest re-ordering the order of your griditems in javascript, before you call the isotope function, that way, all your items will already be in the correct order and any lightbox plugin won't get confused :)
(like this for example: jquery sort list based on data attribute value)
Hope I helped someone ;-) Worked like a charm for me :-)
Yes, this may sound like a frequent question, but Google nor stackoverflow are giving me the answer that I want. I did stumble upon a few results on the WWW, but only found HUGE scripts for just this 1 piece of functionality.
The thing is, I remember doing this before, but I don't exactly remember how. I did it within ONE function and by adding event listeners and stuff along those lines.
Basically, I need a pure DOM script to drag and drop HTML elements for a throwback to older web browsers that don't support the new HTML5 standards. Must be down with the even 'onmousedown', and the text/image must be held for at least 1.5 seconds before calling the dragging.
Thoughts and ideas? Help would be greatly appreciated, guys.
I'm also a bit rusty with screen coordinates and stuff. With this code I want the text to follow the cursor EXACTLY. Not be like, 5 pixels "off" if you know what I mean.
What I had before (parameter of moveText is supposed to be an HTMLDivElement and it's innerText):
function moveText(t){
var id=t.id;
var interval=setInterval(function(){
increment=increment+1;
if(increment>=3){
clearInterval(interval);
t.addEventListener("mousemove",function(event){
t.style.position="absolute";
t.style.top=event.screenY+"px";
t.style.left=event.screenX+"px";
});
}
},500);
t.addEventListener("mouseup",function(){
increment=0;
clearInterval(interval);
});
}