I'm currently looking into creating two separate logos located on the header nav section of this website.
The current navigation before scrolling along with logo is perfect to me. The fixed nav on scroll is also perfect apart from the logo will stay the same.
I have a second logo with the opposite colour to match the white background, the problem I face is what method to use when switching the image from the first to second.
My initial approach may be to use css but as far as things stand, I'm on the fence for how to deal with this, the text for the navigation styling has been fine, it's just any idea on how to switch the image to the second one that I plan on placing there.
If anyone has a rough idea to help me out, I'll highly appreciate that and take it on board.
URL: http://94.23.211.70/~cairngorm/
Something like that http://www.w3schools.com/jsref/event_onscroll.asp
<script type="text/javascript">
window.onscroll = function() {changeSource()};
function changeSource() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
$('.css_class_name').attr('src','new_image.png');
} esle{
$('.css_class_name').attr('src','old_image.png');
}
}
</script>
this is also at you general.js you can customize at this point customize it at line 210
customise the function //Sticky Menu
var sticky_menu = function(){
if( jQuery('.fly-header-site.fly-sticky-header-on').length > 0) {
var header_height = jQuery('.fly-header-site').outerHeight(),
sticky_open = header_height * 2;
jQuery(window).on('scroll', function () {
if (jQuery(window).scrollTop() > header_height + 5) {
jQuery('.fly-header-site').addClass('sticky-menu').css('top', -header_height);
} else {
jQuery('.fly-header-site').removeClass('sticky-menu').css('top', 0);
}
if (jQuery(window).scrollTop() > sticky_open) {
jQuery('.fly-header-site.sticky-menu').addClass('sticky-open')
} else {
jQuery('.fly-header-site.sticky-menu').removeClass('sticky-open')
jQuery('.fly-wrap-logo').src('http://www.vectortemplates.com/raster/superman-logo-012a.png')
}
});
}
};
Related
Here's the layout I'm trying to achieve:
My content currently is a series of basic, block HTML elements (h[1-5], p, ul, etc.) contained in a div, and if possible I'd like to keep them that way. All of the images are inside their own p in order to responsively resize
I've been able to add a div style="float:right" to the top of the content which creates the sidebar and wraps "normal" text content around it - specifically the first paragraph in my diagram above. However, the img, which is set to 100% does not wrap, it flows below the sidebar.
So really, I want images to have one of two widths - either 100%-width(sidebar) if the top of the image "should be" above the bottom of the sidebar, or 100% if the top of the image is below the bottom of the sidebar.
I can of course manually set the width on an image when debugging a page, to a value less than 100%-width(sidebar) and it jumps right up into place, so clearly the browser knows what that size is to not "push" the image down below the sidebar...
Here's the actual page where I'd like to get this to work; note that the first image is below the sidebar:
https://adventuretaco.com/?p=3655&draftsforfriends=kIq7mVDhNtCSklITGCJs2HAcE9xuPX8d
additionally, here is the CSS and HTML that I currently have for the post content:
CSS
p {
margin: 0 0 1.25em 0;
}
ol, ul {
margin: 0 1.5em 1.25em 1.5em;
}
.full-width-container {
width: 100%;
}
.full-width-container img {
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
transition: 0.5s;
}
.full-width-container img.flickrPhoto {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
transition: 0.5s;
}
HTML
<div class="post-content">
<p>As you may recall, we'd just cancelled our flight home due to the unknowns of Covid-19, but were still in exploration mode as we entered the Valley of Fire State Park in southeastern Nevada.</p>
<p id="photoContainer132" class="full-width-container"><img id="photo132" class="flickrPhoto" src="https://live.staticflickr.com/65535/49714173358_d19b1c2e70_n.jpg" /></p>
<p>Our trip to the Valley of Fire was somewhat opportunistic to say the least. A year before this trip ever even crossed my mind, I'd seen a photo on Flickr that had caught my eye. Sharp as ever, I completely forgot to save the photo or a link to the photo <img src="https://www.tacomaworld.com/styles/default/my/smilies/annoyed_gaah.gif" />, but - luckily for me - the photo had been geotagged <em>and</em> I'd saved a point of interest in my Google Earth map of Nevada. I'd noticed that point as I'd planned this trip, and mapped out the route, excited to see what nature had in store. So yeah, apparently, I'm not <em>always</em> as dumb as I look. <img src="https://www.tacomaworld.com/styles/default/my/smilies/original/wink.png" /> In researching Valley of Fire, I also discovered a second hike -rumored to have petroglyphs - and since it was on our way to the main attraction, we decided to stop off there first.</p>
<p id="photoContainer133" class="full-width-container"><img id="photo133" class="flickrPhoto" src="https://live.staticflickr.com/65535/49715029457_a61cffc61b_n.jpg" /></p>
</div>
I think you first need to downsize a little your images, due to their size, it becomes a little difficult to manipulate them within the scope of what you would like to do. You can alter them inside the tag, or from the css file. Then after, you can use inside of that code a "float: left;" in the .full-width-container img, give it a margin that should put them side to side.
OK, so after a bunch more research, trial and error, I've come to the conclusion that the answer to this question is that it cannot be solved with CSS / layout alone.
In the end, incorporated Javascript to solve the problem. It's not perfect - if images have been downsized to flow around the sidebar, then when the browser window gets larger, they don't get larger as ideally as they could.
Here's where I ended up; working sample at (scroll down here to see the sidebar)
https://adventuretaco.com/hidden-valleys-secret-tinaja-mojave-east-5/#photoContainer190
// start shortly after page is rendered
setTimeout(resizeImagesForFacebookEmbed, 500);
function resizeImagesForFacebookEmbed() {
var tryAgain = true;
// find each of the elements that make up the post, and iterate through each of them
var content = jQuery('div.post-content').children().each(function () {
if (this.tagName.toLowerCase() == 'p') {
var firstChild = this.firstChild;
var firstElementChild = this.firstElementChild;
if (firstChild != null && firstChild == this.firstElementChild && firstElementChild.tagName.toLowerCase() == 'img') {
var pRect = this.getBoundingClientRect();
var imgRect = firstChild.getBoundingClientRect();
var difference = imgRect.top - pRect.top;
// if the image contained in the p is not at the top of the p, then make it smaller
// so it will fit next to the embed, which is 350px wide
if (difference > 25 || imgRect.width < (pRect.width - 400)) {
var sidebarLeft = document.getElementById("fbSidebar").getBoundingClientRect().left;
var imgLeft = firstChild.getBoundingClientRect().left;
var imgWidth = (sidebarLeft - imgLeft) * .95;
firstChild.style.width = imgWidth + "px";
tryAgain = false;
setTimeout(resizeImagesForFacebookEmbed, 1000);
} else {
// do nothing
}
}
}
});
if (tryAgain)
setTimeout(resizeImagesForFacebookEmbed, 1000);
}
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout(timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
// handle window resize event to re-layout images
jQuery(function () {
jQuery(window).resize(function () {
waitForFinalEvent(function () {
resizeImagesForFacebookEmbed();
}, 500, "atFbEmbedId"); // replace with a uniqueId for each use
});
});
my knowledge of web tech is mostly HTML and CSS.
I've used bootstrap and jQuery to allow the navigation to get stuck on scroll, it did for a while and then stopped once I started adding new pages. Here's my JavaScript:
$('.carousel').carousel({
interval: 5000 //changes the speed
})
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
Here's my web page where you can see the issue. What can I do about it?
Thanks in advance
In your javascript, you are looking to apply the class nav-bar-fixed to an element with the ID nav_bar. However, you don't have that ID put on any element.
if ($(window).scrollTop() > 280) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
But, when I add and ID to <nav> it works. It needs some modification to look good, but it does work then. <nav id="nav_bar">
I'm guessing that with the new pages you created, you just missed adding the ID or copied an older version of code, etc.
Is it possible to make DIV bigger when content of the page is scrolled? I have chatbox with position:fixed on the right side of my page. My CSS for the chat box is height:100% right:0 bottom:0 top:50px. The top:50px is because I don't want it to hide the navigation bar on top of my page. Now the problem is, that when I start scrolling the page, the navigation bar obviously disappear from sight and there is 50px high blank space on top of my chatbox. What I want is that when I start scrolling the page, the chatbox should take the whole 100% of the screen, so that there is no blank space on top of it.
you may do this:
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.chat_box').css({top:'0px'});
}
else {
$('.chat_box').css({top:'10px'});
}
});
});
http://jsfiddle.net/5tnygmrz/1/
demo - http://jsfiddle.net/victor_007/cq1e8c1t/
i think you will need javascript
window.onscroll = function (e) {
var topscroll = window.scrollY
if (topscroll > 50) {
document.getElementById('fixed').style.top = 0
} else {
document.getElementById('fixed').style.top = 50 + 'px'
}
}
http://nggalaxy.ru/en/about-us/ - here is the example of exact behaviour to be implemented. When you scroll down the page, the side menu disappears and appears on top of the page.
How it can be realized using bootstrap for example?
Thank you.
Here is an example of raw Javascript + jQuery making this happen:
<script type="text/javascript">
$(window).scroll(function(){
var a = 112;
var pos = $(window).scrollTop();
if(pos > a) {
$("menu").css({
position: 'fixed'
});
}
else {
$("menu").css({
position: 'absolute',
top:'600px'
});
}
});
</script>
This will add a CSS style if the user scrolled 112 pixel down. Like this you can create all styles for your menu.
In General: Use javascript to check on what scroll-position the user is, and append the styles or classes.
So I have this:
clicking here
<a name="link">goes here</a>
Simple, but the problem is that my site has a fixed position header that stays at the top of the page, so when a user clicks on the link, the place I want them to go to is hidden by the header. So I guess where I really want them to end up a certain amount of pixels above what I actually want them to see. I've tried putting the destination link above where I want them to end up, but it's a block of text so it changes with different screen sizes and therefore isn't consistent.
I'm wondering if there is any way to solve this problem, perhaps something with css.
Thanks in advance.
I realise this is over a year old, but for the benefit of anyone else who comes across it:
A slightly simpler solution is to put padding at the top of the section you are targeting with the link.
HTML:
<section id="section_name">
...Your stuff here...
</section>
CSS:
#section_name {
padding-top: 40px;
}
You could use a jQuery method so that when a link with a # is clicked, it finds the position of the element it's meant to go to and then moves to a position X number of pixels above the target.
Something like this:
$(function(){
var positionOffset = 50;
$('a[href=*"#"]').click(function(){
var targetHash = this.hash;
if(targetHash.length > 0 && targetHash == window.location.hash){
var elementPosition;
if($(targetHash).length){
elementPosition = $(targetHash).offset();
} else {
var targetAnchor = targetHash.replace("#", "");
elementPosition = $('a[name="' + targetAnchor + '"]').position();
}
$(window).scrollTop(elementPosition.top - positionOffset);
return false;
} else {
return true;
}
});
});