I'm really struggling to get the same header effect of this website http://demo.qodeinteractive.com/bridge13/.
I'm using Wordpress plugin myStickymenu but the results is not what I'm looking for and want to use jquery instead but I have no idea how to do it.
You need to check the 'scroll' event to get the scroll position. If the scroll position is below the height of the header, add a class. The class that gets added will have a different height value which will overwrite the default value.
function init() {
// Check scroll event
window.addEventListener('scroll', function(e){
// Check scroll position
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
// If the scroll position is a larger value than the chosen value (shrinkOn)
if (distanceY > shrinkOn) {
// Add class "smaller"
classie.add(header,"smaller");
} else {
// Otherwise remove it
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
Source: http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/
Related
I need to replace all of my png icons with with svg - it is my employee request. I am using FFImageLoading. Some of the icons displayed in Pages are displaying properly but the problem is that I can't display svg icon in toolbar (toolbar item and hamburger icon).
I am using Xamarin.Forms 4.3.0.908675 and Xamarin.FFImageLoading - all in version 2.4.11.982.
My logo.svg is placed in MyProject.EmbeddedFiles.Images.
Here are the code samples I tried:
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = "logo.svg",
Order = ToolbarItemOrder.Primary
});
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = "MyProject.EmbeddedFiles.Images.logo.svg",
Order = ToolbarItemOrder.Primary
});
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = ImageSource.FromResource("MyProject.EmbeddedFiles.Images.test.svg", typeof(App).GetTypeInfo().Assembly),
Order = ToolbarItemOrder.Primary
});
ToolbarItems.Add(new ToolbarItem
{
IconImageSource = new SvgImageSource(ImageSource.FromResource("MyProject.EmbeddedFiles.Images.test.svg", typeof(App).GetTypeInfo().Assembly), 10,10,true),
Order = ToolbarItemOrder.Primary
});
Neither solution works. My solution based on https://github.com/luberda-molinet/FFImageLoading/issues/1105
What am I missing? Is this even possible?
I have a div in my html:
.row(id="div_amount")
.col-sm-2
label(for="amount") Amount:
.col-sm-1
input(type="text", name="amount")
which is perfect as I expected. It displays in one line for both elements.
I have a radio button which have an onclick event for toggle the display of this div section.
function div_toggle() {
div_amount = document.getElementById('div_amount');
if (radio_value === 0) {
div_amount.style.display = "block";
} else {
div_amount.style.display = "none";
}
}
However, after click on the radio button, it always displays as two lines.
How could I fix it to always display in one line?
Please take a look at https://stackoverflow.com/help/mcve and try to include a reproducible example.
In bootstrap4, rows are displayed as flex, i.e., "display: flex;". So in your JavaScript if you change it to display as block, the columns within the row would be broken.
You can set its display to flex, like
if (radio_value === 0) {
div_amount.style.display = "flex";
} else {
div_amount.style.display = "none";
}
although setting HTML element styles in JavaScript is considered as bad practice IMO.
I'm trying to accomplish two things:
Left Column: Steps are faded by default, but individual steps fade in to full color on hover.
Right Column: A different image is displayed based on the step being hovered in the left column. By default, the first image should be displayed.
I am using the fadeIn function, but I cant get it to work the way I'm hoping. Whats the best way to go about doing this?
Jsfiddle Example
$(document).ready(function() {
$('#step-one')
.hover(
function() {
$('#step-one-image-holder').fadeIn('slow');
}, function() {
$('#step-one-image-holder').fadeOut('fast');
}
);
$('#step-two')
.hover(
function() {
$('#step-two-image-holder').fadeIn('slow');
}, function() {
$('#step-two-image-holder').fadeOut('fast');
}
);
$('#step-three')
.hover(
function() {
$('#step-three-image-holder').fadeIn('slow');
}, function() {
$('#step-three-image-holder').fadeOut('fast');
}
);
});
If you use "hover" the images will disappear always when you leave the left column (I not sure if you want it). You may use "fadeIn" and "fadeOut" inside a "mouseenter" event:
(Maybe you need to put the images on absolute position to avoid the flickering)
//---Show images on mouseenter
$("div[id^='step-']").on("mouseenter", function(){
var image = $("img[id='" + $(this).attr("id") + "-image-holder']");
$("img[id^='step-']").not(image).fadeOut();
image.fadeIn();
});
//---Hide images by default
$("img[id^='step-']:gt(0)").hide();
jsfiddle
I am trying to do 2 actions on one click on the element using Masonry library. It should work the way that when I click on the element it expands (I am adding class to have box bigger) and in the meantime the page is scrolling to that box. The problem is that when you expand the box it may drop a line down and that means the function called to scroll will scroll to wrong place. It should do the layout and get new position of the element and then move...
I got it almost working. It is expanding the box and doing new layout and when finished it scrolls the page to the box... but it looks a little bit strange and it first moves all the boxes for new layout, then stops and strars moving the page. I would prefer that to be done in one move. It that possible.
Here is my code:
$(document).ready(function() {
var $container = $('#container');
// initialize
var msnry = new Masonry( container, {
columnWidth: 280,
itemSelector: '.item'
} );
$('.openBoks').on('click', function() {
// this is my element
var thisBox = $(this).parent().parent();
// adding the class to expand it
thisBox.addClass('opened');
// calling method to do new layout
msnry.layout();
msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems )
{
$('html, body').animate({
scrollTop: (thisBox.offset().top-10)
}, 700);
return true;
});
});
});
In case you or someone else is still looking for an answer to this, I did a little workaround this problem. The idea was basically the same, to do the scroll and the masonry repositioning simultaneously. It's not the most elegant solution since I added a couple of lines inside the masonry script.
Inside masonry.pkgd.js, there is a function _processLayoutQueue that positions the masonry items stored in the queue array, calling the _positionItem for each of the items.
Outlayer.prototype._processLayoutQueue = function( queue ) {
for ( var i=0, len = queue.length; i < len; i++ ) {
var obj = queue[i];
this._positionItem( obj.item, obj.x, obj.y, obj.isInstant );
}
};
What I did was check through the iteration for the item with the identifying masonry class, in your case ".opened". So when that item is found, I immediately activate the page scroll using a cointainer div ("#container_div_id" for this example) for the offset and adding the items "y" position (obj.y). At the end, the code looks something like this:
Outlayer.prototype._processLayoutQueue = function( queue ) {
for ( var i=0, len = queue.length; i < len; i++ ) {
var obj = queue[i];
this._positionItem( obj.item, obj.x, obj.y, obj.isInstant );
/* ADDED CODE */
if( $(obj.item.element).hasClass('opened')){
$('html, body').animate({
scrollTop: $('#container_div_id').offset().top+obj.y
}, 600);
}
/* END OF ADDED CODE */
}
};
This makes the scrolling start right after the positioning of the item, without having to wait for the layoutComplete event. As I said, its not the most elegant solution, but it is pretty solid, It works fine for my case.
Hope it helps someone!
I'm using two panes (grid and details) as master-details pattern.
Now I'm trying to create "Details on the right" or "Details on the bottom" toggle button. I do this by changing the region attribut of the ContentPane, like so:
function toggleDetails() {
if(dijit.byId("Details").region == "right") {
dijit.byId("Details").set("region", "bottom");
dojo.byId("Details").style.height = "200px";
}
else {
dijit.byId("Details").set("region", "right");
dojo.byId("Details").style.width = "400px";
}
dijit.byId("DetailsParent").resize();
}
The panes themselves are changing fine. The problem is that I have a splitter for the details pane. When toggling, the splitter is ok for the original orientation, but doesn't render correctly for the alternate orientation. Any solution to refresh the splitter orientation based on the contentPane region?
I have tried programmatically changing some of splitter widget attributes, like "horizontal" and "region", but nothing really fixed the alternate orientation.
A possible solution could be by using removeChild and addChild like in this example
if (isVertical) {
// vertical layout
this.ap_MainContainer.removeChild(this.ap_TopContainer);
this.ap_TopContainer.region = 'top';
this.ap_MainContainer.addChild(this.ap_TopContainer);
} else {
// horizontal layout
this.ap_MainContainer.removeChild(this.ap_TopContainer);
this.ap_TopContainer.region = 'left';
this.ap_MainContainer.addChild(this.ap_TopContainer);
}