Hey Nectar! So a while back you helped me with getting a "full_width_element" div code (inside of init.js) to be able to allow anything with that div to take up 100% of the width of the browser, which in my case I wanted for images in a portfolio piece.
Since upgrading to 4.5.1, I noticed that the code snippet you gave me a while back has changed considerably and although I tried my best to consolidate the changes, I can't get it to work completely. [I was only able to get it to work with on particular image, but couldn't replicate the code to work for any other images.]
Hey, silly me, I was watching the tutorials and saw the full width content tutorial, so I can basically get the functionality I want with that. I'll go ahead and close this ticket! =)
Hey Nectar! So a while back you helped me with getting a "full_width_element" div code (inside of init.js) to be able to allow anything with that div to take up 100% of the width of the browser, which in my case I wanted for images in a portfolio piece.
Since upgrading to 4.5.1, I noticed that the code snippet you gave me a while back has changed considerably and although I tried my best to consolidate the changes, I can't get it to work completely. [I was only able to get it to work with on particular image, but couldn't replicate the code to work for any other images.]
The original snippet is as follows:
//full width content sections $('.carousel-outer').has('.carousel-wrap[data-full-width="true"]').css('overflow','visible'); $('.full_width_element, .carousel-wrap[data-full-width="true"], .portfolio-items[data-col-num="elastic"]').each(function(){
And the way it was working previously was as follows:
The newest init.js snippet for 4.5.1 is as follows:
//full width content sections $('.carousel-outer').has('.carousel-wrap[data-full-width="true"]').css('overflow','visible'); $('.carousel-wrap[data-full-width="true"], .portfolio-items[data-col-num="elastic"], .full-width-content').each(function(){ $extraSpace = ($(this).hasClass('carousel-wrap')) ? 1 : 4; $carouselWidth = ($('#boxed').length == 1) ? parseInt($('.main-content').width()) + parseInt($justOutOfSight*2) : $(window).width() +$extraSpace + $scrollBar ; if($(this).parent().hasClass('default-style')) { if($('#boxed').length != 0) { $carouselWidth = ($('#boxed').length == 1) ? parseInt($('.main-content').width()) + parseInt($justOutOfSight*2) : $(window).width() + $extraSpace + $scrollBar ; } else { $carouselWidth = ($('#boxed').length == 1) ? parseInt($('.main-content').width()) + parseInt($justOutOfSight*2) : $(window).width() - ($(window).width()*.02) + $extraSpace + $scrollBar ; $windowWidth = ($(window).width() 0 && !$(this).parent().hasClass('span_3') && $(this).parent().attr('id') != 'sidebar-inner' && $(this).parent().attr('id') != 'portfolio-extra' && !$(this).find('.carousel-wrap[data-full-width="true"]').length > 0 && !$(this).find('#portfolio[data-col-num="elastic"]').length > 0){ $(this).css({ 'margin-left': - $justOutOfSight, 'width': $carouselWidth, 'visibility': 'visible' }); } else if($(this).parent().attr('id') == 'portfolio-extra' && $('#full_width_portfolio').length != 0) { $(this).css({ 'margin-left': - $justOutOfSight, 'width': $carouselWidth, 'visibility': 'visible' }); } else { $(this).css({ 'margin-left': 0, 'visibility': 'visible' }); } }); } var $contentElementsNum = ($('#portfolio-extra').length == 0) ? $('.main-content > .row > *').length : $('.main-content > .row #portfolio-extra > *').length ; function parallaxScrollInit(){ $('.full-width-section.parallax_section, .full-width-content.parallax_section').each(function(){ var $id = $(this).attr('id'); $('#'+$id + ".parallax_section").parallaxScroll("50%", 0.2); }); } parallaxScrollInit(); //if fullwidth section is first or last, remove the margins so it fits flush against header/footer function fwsClasses() { $contentElementsNum = ($('#portfolio-extra').length == 0) ? $('.main-content > .row > *').length : $('.main-content > .row #portfolio-extra > *').length ; $('.full-width-section, .full-width-content, .row > .nectar-slider-wrap[data-full-width="true"], .wpb_wrapper > .nectar-slider-wrap[data-full-width="true"], .parallax_slider_outer, .portfolio-items[data-col-num="elastic"]').each(function(){ if(!$(this).parent().hasClass('span_9') && !$(this).parent().hasClass('span_3') && $(this).parent().attr('id') != 'sidebar-inner'){ if($(this).parents('.wpb_row').length > 0){ if($(this).parents('#portfolio-extra').length > 0 && $('#full_width_portfolio').length == 0) return false; ////first if($(this).parents('.wpb_row').index() == '0' && $('#page-header-bg').length != 0 || $(this).parents('.wpb_row').index() == '0' && $('.parallax_slider_outer').length != 0){ //$(this).css('margin-top','-2.1em').addClass('first-section nder-page-header'); } else if($(this).parents('.wpb_row').index() == '0' && $('#page-header-bg').length == 0 && $('.page-header-no-bg').length == 0 && $('.project-title').length == 0 && $(this).parents('.wpb_row').index() == '0' && $('.parallax_slider_outer').length == 0 && $('.project-title').length == 0 && $('body[data-bg-header="true"]').length == 0 ){ $(this).css('margin-top','-70px').addClass('first-section'); } //check if it's also last (i.e. the only fws) if($(this).parents('.wpb_row').index() == $contentElementsNum-1 && $('#respond').length == 0 ) { if($(this).attr('id') != 'portfolio-filters-inline') { $('.container-wrap').css('padding-bottom','0px'); $('#call-to-action .triangle').remove(); } } } else { if($(this).parents('#portfolio-extra').length > 0 && $('#full_width_portfolio').length == 0) return false; if( $(this).find('#portfolio-filters-inline').length == 0 && $(this).attr('id') != 'post-area' ) { ////first if($(this).index() == '0' && $('#page-header-bg').length != 0 || $(this).index() == '0' && $('.parallax_slider_outer').length != 0){ //$(this).css('margin-top','-2.1em').addClass('first-section nder-page-header'); } else if($(this).index() == '0' && $('#page-header-bg').length == 0 && $(this).index() == '0' && $('.page-header-no-bg').length == 0 && $(this).index() == '0' && $('.parallax_slider_outer').length == 0) { $(this).css('margin-top','-70px').addClass('first-section'); } //check if it's also last (i.e. the only fws) if($(this).index() == $contentElementsNum-1 && $('#respond').length == 0 ) { $('.container-wrap').css('padding-bottom','0px'); $('#call-to-action .triangle').remove(); } } } } }); $('#portfolio-extra > .nectar-slider-wrap[data-full-width="true"], .portfolio-wrap').each(function(){ //check if it's last if($(this).index() == $contentElementsNum-1 && $('#commentform').length == 0 && $('#pagination').length == 0) { $(this).css('margin-bottom','-40px'); $('#call-to-action .triangle').remove(); } }); $('#portfolio-filters').each(function(){ ////first if($(this).index() == '0' && $('#page-header-bg').length != 0 || $(this).index() == '0' && $('.parallax_slider_outer').length != 0){ $(this).css({'margin-top':'-2.1em'}).addClass('first-section nder-page-header'); } else if($(this).index() == '0' && $('#page-header-bg').length == 0 || $(this).index() == '0' && $('.parallax_slider_outer').length == 0){ $(this).css({'margin-top':'0px'}).addClass('first-section'); } }); $('#portfolio-filters-inline').each(function(){ ////first if($(this).parents('.wpb_row').length > 0){ if($(this).parents('.wpb_row').index() == '0' && $('#page-header-bg').length != 0 || $(this).parents('.wpb_row').index() == '0' && $('.parallax_slider_outer').length != 0){ $(this).css({'margin-top':'-2.1em', 'padding-top' : '19px'}).addClass('first-section nder-page-header'); } else if($(this).parents('.wpb_row').index() == '0' && $('#page-header-bg').length == 0 || $(this).parents('.wpb_row').index() == '0' && $('.parallax_slider_outer').length == 0){ $(this).css({'margin-top':'-70px', 'padding-top' : '50px'}).addClass('first-section'); } } else { if($(this).index() == '0' && $('#page-header-bg').length != 0 || $(this).index() == '0' && $('.parallax_slider_outer').length != 0){ $(this).css({'margin-top':'-2.1em', 'padding-top' : '19px'}).addClass('first-section nder-page-header'); } else if($(this).index() == '0' && $('#page-header-bg').length == 0 || $(this).index() == '0' && $('.parallax_slider_outer').length == 0){ $(this).css({'margin-top':'-70px', 'padding-top' : '50px'}).addClass('first-section'); } } }); $('.parallax_slider_outer').each(function(){ if(!$(this).parent().hasClass('span_9') && !$(this).parent().hasClass('span_3') && $(this).parent().attr('id') != 'sidebar-inner'){ if($(this).parents('#portfolio-extra').length > 0 && $('#full_width_portfolio').length == 0) return false; ////first if($(this).parent().index() == '0' && $('#page-header-bg').length != 0){ $(this).addClass('first-section nder-page-header'); } else if($(this).parent().index() == '0' && $('#page-header-bg').length == 0){ $(this).css('margin-top','-40px').addClass('first-section'); if(!$('body').hasClass('single-post')) $('.container-wrap').css('padding-top', '0px'); } //check if it's also last (i.e. the only fws) if($(this).parent().index() == $contentElementsNum-1 && $('#post-area').length == 0) { $('#call-to-action .triangle').remove(); $('.container-wrap').hide(); } } }); } //if not using a fullwidth slider first, ajdust the top padding //if( $('.nectar-slider-wrap.first-section').length > 0 && $('.nectar-slider-wrap.first-section').attr('data-full-width') != 'true' || $('.nectar-slider-wrap.first-section').length > 0 && $('.nectar-slider-wrap.first-section').attr('data-full-width') != 'boxed-full-width' ) $('body').attr('data-bg-header','false'); //if( $('.wpb_row.first-section:not(".full-width-content") .nectar-slider-wrap').length > 0 && $('.wpb_row.first-section:not(".full-width-content") .nectar-slider-wrap').attr('data-full-width') != 'true' || $('.wpb_row.first-section:not(".full-width-content") .nectar-slider-wrap').length > 0 && $('.wpb_row.first-section:not(".full-width-content") .nectar-slider-wrap').attr('data-full-width') != 'boxed-full-width' ) $('body').attr('data-bg-header','false'); //set sizes fullWidthSections(); fwsClasses(); //sizing for fullwidth sections that are image only function fullwidthImgOnlySizingInit(){ ////set inital sizes $('.full-width-section:not(.custom-skip)').each(function(){ var $fwsHeight = $(this).outerHeight(true); //make sure it's empty and also not being used as a small dvider if($(this).find('.span_12 *').length == 0 && $.trim( $(this).find('.span_12').text() ).length == 0 && $fwsHeight > 40){ $(this).addClass('bg-only'); $(this).css({'height': $fwsHeight, 'padding-top': '0px', 'padding-bottom': '0px'}); $(this).attr('data-image-height',$fwsHeight); } }); } function fullwidthImgOnlySizing(){ $('.full-width-section.bg-only').each(function(){ var $initialHeight = $(this).attr('data-image-height'); if( window.innerWidth < 1000 && window.innerWidth > 690 ) { $(this).css('height', $initialHeight - $initialHeight*.60); } else if( window.innerWidth = 1000 ) { $(this).css('height', $initialHeight - $initialHeight*.33); } else { $(this).css('height', $initialHeight); } }); } fullwidthImgOnlySizingInit(); fullwidthImgOnlySizing(); //change % padding on rows to be relative to screen function fullWidthRowPaddingAdjustInit(){ if($('#boxed').length == 0){ $('.full-width-section, .full-width-content').each(function(){ var $topPadding = $(this)[0].style.paddingTop; var $bottomPadding = $(this)[0].style.paddingBottom; if($topPadding.indexOf("%") >= 0) $(this).attr('data-top-percent',$topPadding); if($bottomPadding.indexOf("%") >= 0) $(this).attr('data-bottom-percent',$bottomPadding); }); } } function fullWidthRowPaddingAdjustCalc(){ if($('#boxed').length == 0){ $('.full-width-section[data-top-percent], .full-width-section[data-bottom-percent], .full-width-content[data-top-percent], .full-width-content[data-bottom-percent]').each(function(){ var $windowHeight = $(window).width(); var $topPadding = ($(this).attr('data-top-percent')) ? $(this).attr('data-top-percent') : 'skip'; var $bottomPadding = ($(this).attr('data-bottom-percent')) ? $(this).attr('data-bottom-percent') : 'skip'; //top if($topPadding != 'skip') { $(this).css('padding-top',$windowHeight*(parseInt($topPadding)/100)); } //bottom if($bottomPadding != 'skip'){ $(this).css('padding-bottom',$windowHeight*(parseInt($bottomPadding)/100)); } }); } } fullWidthRowPaddingAdjustInit(); fullWidthRowPaddingAdjustCalc(); //full width content column sizing function fullWidthContentColumns(){ //standard carousel $('.main-content > .row > .full-width-content, #portfolio-extra > .full-width-content').each(function(){ //only set the height if more than one column if($(this).find('> .span_12 > .col').length > 1){ var tallestColumn = 0; var $columnInnerHeight = 0; $(this).find('> .span_12 > .col').each(function(){ var $padding = parseInt($(this).css('padding-top')); ($(this).find('> .wpb_wrapper').height() + ($padding*2) > tallestColumn) ? tallestColumn = $(this).find('> .wpb_wrapper').height() + ($padding*2) : tallestColumn = tallestColumn; }); $(this).find('> .span_12 > .col').each(function(){ //columns with content if($(this).find('> .wpb_wrapper > *').length > 0){ $(this).css('height',tallestColumn); } //empty columns else { $(this).css('min-height',tallestColumn); } }); //nested column height var $childRows = $(this).find('> .span_12 > .col .wpb_row').length; if(window.innerWidth > 1000) { var $padding = parseInt($(this).find('> .span_12 > .col').css('padding-top')); //$(this).find('> .span_12 > .col .wpb_row .col').css('min-height',(tallestColumn-($padding*2))/$childRows + 'px'); } else { $(this).find('> .span_12 > .col .wpb_row .col').css('min-height','0px'); } //vertically center if($(this).hasClass('vertically-align-columns') && window.innerWidth > 1000){ //parent columns $(this).find('> .span_12 > .col').each(function(){ $columnInnerHeight = $(this).find('> .wpb_wrapper').height(); var $marginCalc = ($(this).height()/2)-($columnInnerHeight/2); if($marginCalcHey, silly me, I was watching the tutorials and saw the full width content tutorial, so I can basically get the functionality I want with that. I'll go ahead and close this ticket! =)