on my Site www.yourpod.de the Navigation Bar turns into Black when scrolling. I just want to show the Black one which is fixed on the top. Can anybody held me?
Replace the following code in custom.js
var transparent = true;
if ($( '.navbar-color-on-scroll' ).length !== 0) {
var navbarHome = $( '.navbar-color-on-scroll' ),
headerWithTopbar = 0;
if ( navbarHome.hasClass( 'header-with-topbar' ) ) {
headerWithTopbar = 40;
}
$( window ).on(
'scroll', debounce(
function () {
if ($( document ).scrollTop() > headerWithTopbar) {
if (transparent) {
transparent = false;
navbarHome.removeClass( 'navbar-transparent' );
navbarHome.addClass( 'navbar-not-transparent' );
}
} else {
if ( ! transparent) {
transparent = true;
navbarHome.addClass( 'navbar-transparent' );
navbarHome.removeClass( 'navbar-not-transparent' );
}
}
}, 17
)
);
}
with this line
$( '.navbar-color-on-scroll' ).addClass('navbar-scroll-point navbar-not-transparent');
Related
In IE8 when i give min-height in vh then ie8 ignore it and not work.in other brower work well.some where i read that vh not support ie8 any solution that i use vh in ie8.
<div class=" item Finish " id="Finish" style="overflow: visible!important;" >
<div style="background-color: #27AE61!important;padding: 0px !important;min-height:85vh;overflow: visible!important;">
<-- html code -->
</div>
</div>
Silver Ringvee's answer is absolutely correct, except that default jQuery .css() functionality is broken when you want to do stuff like .css('margin-right') to get the right margin of an element. I found this issue when using fancyBox. I fixed that by checking if props is a string, if so parseProps($.extend({}, props)) is not used. I also added a check if multiple arguments were given, to support css('margin-right', '12px'). Here's my code:
(function ($, window) {
var $win = $(window), _css = $.fn.css;
function viewportToPixel(val) {
var vwh_match = val.match(/[vwh]+/);
var digits_match = val.match(/\d+/);
if (vwh_match && vwh_match.length && digits_match && digits_match.length) {
return (vwh_match[0] == 'vh' ? $win.height() : $win.width()) * (digits_match[0] / 100) + 'px';
}
return val;
}
function parseProps(props) {
var p, prop;
for (p in props) {
prop = props[p];
if (/[vwh]$/.test(prop)) {
props[p] = viewportToPixel(prop);
}
}
return props;
}
$.fn.css = function (props) {
var self = this,
originalArguments = arguments,
update = function () {
if (typeof props === 'string' || props instanceof String) {
if (originalArguments.length > 1) {
var argumentsObject = {};
argumentsObject[originalArguments[0]] = originalArguments[1];
return _css.call(self, parseProps($.extend({}, argumentsObject)));
} else {
return _css.call(self, props);
}
} else {
return _css.call(self, parseProps($.extend({}, props)));
}
};
$win.resize(update);
return update();
};
}(jQuery, window));
vw and vh units are supported by IE 9 and up.
Try this:
(function( $, window ){
var $win = $(window)
, _css = $.fn.css;
function viewportToPixel( val ) {
var percent = val.match(/\d+/)[0] / 100,
unit = val.match(/[vwh]+/)[0];
return (unit == 'vh' ? $win.height() : $win.width()) * percent + 'px';
}
function parseProps( props ) {
var p, prop;
for ( p in props ) {
prop = props[ p ];
if ( /[vwh]$/.test( prop ) ) {
props[ p ] = viewportToPixel( prop );
}
}
return props;
}
$.fn.css = function( props ) {
var self = this,
update = function() {
return _css.call( self, parseProps( $.extend( {}, props ) ) );
};
$win.resize( update );
return update();
};
}( jQuery, window ));
$('div').css({
height: '50vh',
width: '50vw',
marginTop: '25vh',
marginLeft: '25vw',
fontSize: '10vw'
});
Working demo: http://jsbin.com/izosuy/1/edit?js,output
Works well in IE8 as well!
Read this topic for more info: Is there any cross-browser javascript for making vh and vw units work
I have some difficulties and would like your help.
I want to apply a FreeTransform in some objects with a particular class or id.
For example ... Within my HTML, I want to put an image gallery. And I would like the script freetransform apply to all images that have a specific class.
I have an example of what I did so far.
var r = Raphael(document.getElementById('workspace'));
var img = r.image('http://www.porcopedia.com/images/thumb/Simbolo_Goi%C3%A1s.jpg/600px-Simbolo_Goi%C3%A1s.jpg', 10, 10, 200, 200);
register(img);
function register(el) {
el.data('dragged', false);
el.click(function() {
// Toggle handles on click if no drag occurred
if ( !this.data('dragged') ) {
if ( this.freeTransform.handles.center === null ) {
this.toFront();
this.freeTransform.showHandles();
} else {
this.freeTransform.hideHandles();
}
}
});
r.freeTransform(el, {attrs: {
fill: 'black',
stroke: '#111'
}, drag: true,
keepRatio: ['axisX', 'axisY','bboxCorners'],
size: 6,
scale: [ 'axisX', 'axisY', 'bboxCorners', 'bboxSides' ],
rotate: true,
draw: ['bbox', 'circle']}, function(ft, events) {
if ( events.indexOf('drag start') !== -1 ) {
el.data('dragged', false);
}
if ( events.indexOf('drag') !== -1 ) {
el.data('dragged', true);
}
}).hideHandles();
}
Example JSFIDDLE
I'm working on a website for a school project, I'm using a template called quantua. If you go to live demo of the template ( http://www.templatesjoomla.net/index.php/joomla3-x/244-quantua-joomla-3-x.html ), you can see that when resizing the browser window the image shrinks so much that a black background appears. I don't want it to do that, how can the resizing be achived like on this (http://www.websitetemplatesonline.com/free-template/progress-business.html) template? I played with css quite a bit, but i failed, so I guess it has to do with javascript?
heres the javascript code
(function($) {
var NivoSlider = function(element, options){
// Defaults are below
var settings = $.extend({}, $.fn.nivoSlider.defaults, options);
// Useful variables. Play carefully.
var vars = {
currentSlide: 0,
currentImage: '',
totalSlides: 0,
running: false,
paused: false,
stop: false,
controlNavEl: false
};
// Get this slider
var slider = $(element);
slider.data('nivo:vars', vars).addClass('nivoSlider');
// Find our slider children
var kids = slider.children();
kids.each(function() {
var child = $(this);
var link = '';
if(!child.is('img')){
if(child.is('a')){
child.addClass('nivo-imageLink');
link = child;
}
child = child.find('img:first');
}
// Get img width & height
var childWidth = (childWidth === 0) ? child.attr('width') : child.width(),
childHeight = (childHeight === 0) ? child.attr('height') : child.height();
if(link !== ''){
link.css('display','none');
}
child.css('display','none');
vars.totalSlides++;
});
// If randomStart
if(settings.randomStart){
settings.startSlide = Math.floor(Math.random() * vars.totalSlides);
}
// Set startSlide
if(settings.startSlide > 0){
if(settings.startSlide >= vars.totalSlides) { settings.startSlide = vars.totalSlides - 1; }
vars.currentSlide = settings.startSlide;
}
// Get initial image
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
// Show initial link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
// Set first background
var sliderImg = $('<img class="nivo-main-image" src="#" />');
sliderImg.attr('src', vars.currentImage.attr('src')).show();
slider.append(sliderImg);
// Detect Window Resize
$(window).resize(function() {
slider.children('img').width(slider.width());
sliderImg.attr('src', vars.currentImage.attr('src'));
sliderImg.stop().height('auto');
$('.nivo-slice').remove();
$('.nivo-box').remove();
});
//Create caption
slider.append($('<div class="nivo-caption"></div>'));
// Process caption function
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', slider);
if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
var title = vars.currentImage.attr('title');
if(title.substr(0,1) == '#') title = $(title).html();
if(nivoCaption.css('display') == 'block'){
setTimeout(function(){
nivoCaption.html(title);
}, settings.animSpeed);
} else {
nivoCaption.html(title);
nivoCaption.stop().fadeIn(settings.animSpeed);
}
} else {
nivoCaption.stop().fadeOut(settings.animSpeed);
}
}
//Process initial caption
processCaption(settings);
// In the words of Super Mario "let's a go!"
var timer = 0;
if(!settings.manualAdvance && kids.length > 1){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
// Add Direction nav
if(settings.directionNav){
slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+ settings.prevText +'</a><a class="nivo-nextNav">'+ settings.nextText +'</a></div>');
// Hide Direction nav
if(settings.directionNavHide){
$('.nivo-directionNav', slider).hide();
slider.hover(function(){
$('.nivo-directionNav', slider).show();
}, function(){
$('.nivo-directionNav', slider).hide();
});
}
$('a.nivo-prevNav', slider).live('click', function(){
if(vars.running) { return false; }
clearInterval(timer);
timer = '';
vars.currentSlide -= 2;
nivoRun(slider, kids, settings, 'prev');
});
$('a.nivo-nextNav', slider).live('click', function(){
if(vars.running) { return false; }
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
});
}
// Add Control nav
if(settings.controlNav){
vars.controlNavEl = $('<div class="nivo-controlNav"></div>');
slider.after(vars.controlNavEl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
vars.controlNavEl.addClass('nivo-thumbs-enabled');
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>');
} else {
vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
//Set initial active link
$('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active');
$('a', vars.controlNavEl).bind('click', function(){
if(vars.running) return false;
if($(this).hasClass('active')) return false;
clearInterval(timer);
timer = '';
sliderImg.attr('src', vars.currentImage.attr('src'));
vars.currentSlide = $(this).attr('rel') - 1;
nivoRun(slider, kids, settings, 'control');
});
}
//For pauseOnHover setting
if(settings.pauseOnHover){
slider.hover(function(){
vars.paused = true;
clearInterval(timer);
timer = '';
}, function(){
vars.paused = false;
// Restart the timer
if(timer === '' && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
});
}
// Event when Animation finishes
slider.bind('nivo:animFinished', function(){
sliderImg.attr('src', vars.currentImage.attr('src'));
vars.running = false;
// Hide child links
$(kids).each(function(){
if($(this).is('a')){
$(this).css('display','none');
}
});
// Show current link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
// Restart the timer
if(timer === '' && !vars.paused && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
// Trigger the afterChange callback
settings.afterChange.call(this);
});
You are looking in the wrong place. use firebug to inspect and know which css file is being used. the file is default.css. Line 159. Thats what you should be playing with. this is what it looks like
.nivoSlider {
float: left;
position: relative;
width: 100%;
height: 480px;
overflow: hidden;
background: #000
this is the block of code that affects the presentation of the navigation bar. but to eradicate the blackness down there, you can use this close fix
change the property height of the nivoslider class to auto on line 159
change the backgroud property of the navigation class from transparent to black on line 296
change the margin-top property of the id menu class to 316px on line 285
this is not guaranteed to not distort especially the last point. but keep trying.
I want to add a java-script to click a button when bottom of page is reached...the code for that is
<script>
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}
//taken from http://james.padolsey.com/javascript/get-document-height-cross-browser/
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
document.addEventListener("scroll", function (event) {
if (getDocHeight() == getScrollXY()[1] + window.innerHeight) {
document.getElementById('next').click()
}
});
</script>
the problem is that the button is SQLFORM's submit button, so my question is what is the id of SQLFORM submit button, or how can i define it..i have tried the following but with no success.
form2.custom.widget.submit_button['_id']='next'
it shows the error 'NoneType' object does not support item assignment.
there is a some excellent information on Custom CSS classes for SQLFORM widget input in web2py, but i still cant figure this out....
You can identify the submit button with a jQuery selector, such as "input[type=submit]" (or more specifically, "#submit_record__row input[type=submit]"). If you want to assign an ID, you can do:
form2.custom.submit['_id'] = 'next'
or:
form2.element('input[type=submit]')['_id'] = 'next'
Right now i have one bar located on top and here is the CSS for it:
#header_bar {
background: #000000;
height: 60px;
position: fixed;
top: 0px;
width: 100%;
z-index: 10020;
}
My question is, how i can make this bar go transparent when the page is scrolled?
Should i use opacity option somehow?
Thanks in advance!
I like the JQuery solutions here, but for completeness wanted to include a JavaScript solution in case anyone was looking for that.
The following will fade the navigation bar when it is not at the top, and return it to a solid color when it is.
function fadeNav(){
var offset = getScrollXY();
//if y offset is greater than 0, set opacity to desired value, otherwise set to 1
offset[1] > 0 ? setNavOpacity(0.5) : setNavOpacity(1.0);
}
function setNavOpacity(newOpacity){
var navBar = document.getElementById("header_bar");
navBar.style.opacity = newOpacity;
}
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft ||
document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}
And of you would call it by adding this in script blocks on your page (at the bottom is best practice):
<script type="text/javascript">
window.onscroll = fadeNav;
</script>
Here is a fiddle demonstrating a working version
Credit for the getScrollXY() function goes to: this site - function is at the bottom
You can't do it with just CSS, you'll need JavaScript/jQuery. Here's a little jQuery code snippet that will fade it in and out:
var opacity = 1;
var lastScrollTop = 0;
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st == 0)
$('#header_bar').css('opacity','1');
if (opacity > 0.5 && (st > lastScrollTop)){
$('#header_bar').css('opacity','-=0.01');
opacity -= 0.01;
}
else if(opacity < 1)
{
$('#header_bar').css('opacity','+=0.01');
opacity += 0.01;
}
lastScrollTop = st;
});
http://jsfiddle.net/LBHvD/
With pure css you will not be able to achieve this effect but by using jQuery to manipulate the css then you can.
jQuery
$(window).scroll(function() {
$('#header_bar').css({opacity: 0});
});
JSFIDDLE
$(window).scroll(function() {
$('#header_bar').animate({opacity: 0});
});
JSFIDDLE Fading out .animate
If you want it to come back once you reach the top again then let me know!
Fade back in at top (Seems to fade in very slow)
$(window).scroll(function() {
$('#header_bar').animate({opacity: 0});
if ($(window).scrollTop() === 0) {
$('#header_bar').animate({opacity: 1});
}
});
JSFIDDLE fade in/out
Hide and show
$(window).scroll(function() {
$('#header_bar').hide(500);
if ($(window).scrollTop() === 0) {
$('#header_bar').show(500);
}
});
JSFIDDLE show/hide
This works great for me, and you can change the fadeTo to animation and works just as great.
var scroll_transparency = false;
$(window).scroll(function() {
// $('div.navbar-main-top').hide(500);
if ($(window).scrollTop() == 0) {
scroll_transparency = false;
$('div.navbar-main-top').fadeTo( "fast", 1 );
} else {
if (scroll_transparency == false) {
$('div.navbar-main-top').fadeTo( "fast", .9 );
scroll_transparency = true;
}
}
});