I'm making a website and have "borders" around my main content. I say "borders" because its not a CSS border, but div's with a background image.
Now I have my left and right div borders (#cont-border-left/right) height set explicitly to 675px, and I have another div (#extend-l/r) just under that which I want to expand down the page when the main content goes past 675px.
I'd like to to this using only CSS if possible, but if not JavaScript/JQuery would be a great solution for me as well.
I was going to paste a bunch of the code here, but it would probably just be easier to view the source, because I think it will make more sense if you can see it all together.
Saw this on a similar question... But I'm not great with jQuery or JavaScript.
$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
$('#rightColumn').height($('#leftColumn').height());
}
else
{
$('#leftColumn').height($('#rightColumn').height());
}
});
And turn it into something like:
$(document).ready(function()
{
if($('#content').height() > $('#cont-border-left').height())
{
$('#extend-l').height = $('#content' - 645px)
^The above line needs help / correcting
}
else
{
$('#extend-l').height = 0
}
});
Any ideas on what I should try out?
EDIT2: Still would like to know if someone has a pure CSS solution!
You might be interested in CSS3 border-images. See various:
css3.info: Border-image: using images for your border
css-tricks.com: Understanding border-image
border-image-generator
border-image
Figured it out. I was close with the edit I made.
Heres the work code should anyone need something similar in the future.
$(document).ready(function()
{
if($('#content').height() > $('#cont-border-left').height())
{
$('#extend-l').height($('#content').height()-675)
}
if($('#content').height() > $('#cont-border-right').height())
{
$('#extend-r').height($('#content').height()-675)
}
});
Related
in this site https://gptrading.it/ i would like to change the time of the transition of the header background hover on scroll. It starts between like two scroll, i would like to make it start right after the first scroll. How can i achive that?
Thank you
If you provide us with a code we can help you. Otherwise it is impossible to know what are you doing exactly.
In advance, it seems that is something related to window.offset() in your javascript function.
EDIT
I have search on your project through JS files. It seems that you are creating a wordpress project. So often the themes you download to install on your wordpress include a theme.js. Here is the path of your theme JS file:
https://gptrading.it/wp-content/themes/techno/assets/js/theme.js?ver=3.2.4
I paste following the code that this file is using to turn the navigation bar into sticky:
// 6.EM STIKY NAV
var headers1 = $('.trp_nav_area');
$(window).on('scroll', function () {
if ($(window).scrollTop() > 200) {
headers1.addClass('hbg2');
} else {
headers1.removeClass('hbg2');
}
});
Just search on this file and replace the value $(window).scrollTop() > 200 with your preference (as you say 0). Remeber that this value is mesured in PX.
I am trying to properly implement a push-side menu plugin (Responsive Menu) into a wordpress theme. Based on SO #Congrim answer, I've managed to achieve a way to lock the body at scroll when push-menu is open (with all the elements including the header fixed) except the interactive links class=edge-ils edge-ils-with-scroll edge-ils-light which will still go Up at push-menu open.
I've saved this sequence into congrim.js file, I've enqueued the script into the theme in functions.php file:
function lockScroll() {
if ($('body').hasClass('lock-scroll')) {
$('body').removeClass('lock-scroll');
}
else {
$('body').addClass('lock-scroll');
}
}
/* I've implemented `onclick="lockScroll();"` in button element,
* using this sequence in the same congrim.js file:
*/
$(document).ready(function() {
$('#responsive-menu-pro-button').click(function() {
lockScroll();
});
});
Removing the jQuery wrap will not give any error in browser console (tested in Chrome) may be still a bad approach to wrapp the code like this in wordpress (?)
In these conditions, unfortunately, overflow: hidden; doesn't apply, at push-side menu open, I can't use this class in CSS file/section:
.lock-scroll {
overflow: hidden;
}
The code will allow me to use only
.lock-scroll {
position: fixed;
}
The question:
Is there any possibility to force the code to implement overflow: hidden;* OR any other a workaround in order to have the interactive links class=edge-ils edge-ils-with-scroll edge-ils-light not going up at push-side menu open, to remain fixed at the position the viewer is clicked before opening the menu?
Please focus on the interactive links issue only, the rest of the scene is fine (header and the logo are in place like it should be, the background pictures are acting like it should as well).
LE: *overflow: hidden; it looks like will produce an unwanted body shifting effect at menu open/close, during the show/hide scrollbar, which is not happening in this stage.
LE2: congrim.js file has been replaced with body-lock.min.js by Outsource WordPress, please see the solution below.
Website testpage here.
Please check the solution given below.
Step 1: Add this CSS .scroll-lock{position:fixed !important;}.
Step 2: Add this JS.
$(document).ready(function() {
var windowTop = 0;
var menuOpen = 0;
var offsetContainerList = 0;
$('#responsive-menu-pro-button').click(function() {
var offsetScrollList = $('.edge-ils-item-link:first').offset().top;
if ($('html').hasClass('scroll-lock')) {
$('#responsive-menu-pro-container').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event) {
if (menuOpen==0) {
menuOpen = 1;
$('html').removeClass('scroll-lock');
$('.edge-ils-content-table').css('top', eval(offsetContainerList)-40+'px'); //change image container top position
$('html').scrollTop(windowTop); //scroll to original position
}
else {
menuOpen = 0;
}
});
}
else {
windowTop = $(window).scrollTop();
offsetContainerList = $('.edge-ils-content-table').offset().top;
$('html').addClass('scroll-lock');
$('.edge-ils-content-table').css('top', -offsetScrollList + 'px'); //change image container top position
}
});
});
That's it!
Please add the below code in your custom js file .
jQuery('#responsive-menu-pro-button').click(function(){
var menu_active = jQuery(this).hasClass('is-active');
if(menu_active){
jQuery('body').css('position','fixed');
}else{
jQuery('body').css('position','static');
}
});
I hope it helps you.
Thanks
Your scroll isn't a natural navigator-based scroll, you have a JS somewhere swapping classes to emulate a scroll (edge-appeared,edge-up,edge-down).
On the push-side menu opening, these classes are reset, overflow-hidden won't change that.
You need to find which JavaScript is swapping those classes and prevent it from doing so, I'd be glad to be of further help but you have so many JS files that it would take quite some time to go through all of these. If you succeed in making a Minimal, Complete, and Verifiable example please post it here.
I have a test page to better explain my problem. I have several items on a list (they're images on the test page); when I click on one of them, a corresponding slideshow, using flexslider, sldes down.
The problem is that, on page load, the slideshow shows all slides at once, at a much smaller size than intended. But then, if I switch the focus from the window (i.e. switch between browser tabs or move to another program and come back), the slideshow is now working and the slides are the proper size. This happens in mobile devices too.
When I check with firebug, there's an element.style rule applying to ul.slides:
transform: translate3d(-89px, 0px, 0px);
Which hides one of the slides. Additionally, there's another rule for the list items inside ul.slides that gives them their initial width, which is not even the same for all sliders so I don't understand where it is coming from.
Can someone take a look and suggest a fix? I've tried overriding the element.style rule but so far unsuccessfully.
I think I've figured it out, in principal at least...
.flexslider{display:none;} seems throw off the re-size function of Flexslider.
You could just remove it, but that makes for some ugly loading.
To avoid said ugly loading I put together a quick, work-around- jsFiddle
$(document).ready(function(){
$(".flexslider").css('display','block').slideUp();
});
There's a still a quick glitch while loading, but hopefully it will at least steer you in the right direction.
Another method I played with a bit was to try and force the re-size function like so-
$(".client").click(function () {
$('.flexslider').resize(); // Problematic but promising
var project = this.id;
var project_id = '#' + project + '-project';
var elem = $(".flexslider:visible").length ? $(".flexslider:visible"): $(".flexslider:first");
elem.slideUp('slow', function () {
$(project_id).slideDown('slow');
});
});
This sort of solved the mini-picture issue, but was spotty at best.
I'm new to JavaScript, i seem to have got myself in a tricky situation. Currently i have some code which below 200px adds a class to make the navbar sticky. The code which have added can be found below.
function navbarCollapse () {
if ($("#mainNav").offset().top > 200) {
$("#mainNav").addClass("navbar-shrink");
$("#mainNav").removeClass("navbar-font");
} else {
$("#mainNav").removeClass("navbar-shrink");
$("#mainNav").addClass("navbar-font");
}
}
//Execute The Collapsing Navbar Function
navbarCollapse();
//Scroll Event
$(window).scroll(navbarCollapse);
The problem I'm facing is 200px on one device is completely different on another device such as a large monitor
I need to be able to calculate the height of a devices view-port, and then execute the code accordingly.
Any help would greatly be appreciated. Like i said I'm new to JavaScript and I'm probably missing something simple.
Instead of making an offset like this add a class that uses css and do your calculations there.
.nav-offset {
Top: 1%;
}
This is certainly going to be an easy one but I can't get my head around what I am doing wrong...
I am trying to do a hover effect on a UL that affects a link within one of the UL LI's.
My current code looks like this:
$("ul.punchlines").hover(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
});
$("ul.punchlines").mouseleave(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});
This technically works as it gives the effect that the base of the element to be scaled remains in place and scales up from the bottom however it does it in two stages, I am trying to get this effect to happen all in one motion so it is a seamless scale and move.
I can do this easily with basic CSS3 transitions but as it is not supported in IE9 I am trying to use jQuery to allow for maximum browser support.
Can anyone offer a little support firstly about how I get the animation to happen in one motion (not staggered) and secondly if this is the right approach? I am new to jquery and only just getting my hands dirty with it :-)
Please see JQuery hover api:
http://api.jquery.com/hover/
also make sure that your "li" have absolute position.
$("ul.punchlines").hover(function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '60%','top':'-65px'});
}, function () {
$(this).find("li a.light-grey-gradient").animate({'width' : '30%','top':'0px'});
});