how to remove background img under the current page

如何删除当前页的背景下,IMG

Tags: jquery html css
标签: jquery html css

问题 (Question)

below codes include two parts the first one handle the #logo page only

$('#logo').on('click', function() {
// get home info
$.get('ajax.php', {page: 'home'}, function(data) {
    result = $.parseJSON(data);     
    // reset background
    $('#content-area').backstretch(result.background);      
    // reset navigation
    $('.current_page_item_green').removeClass('current_page_item_green');
    $('.current_page_item').removeClass('current_page_item');
    $('.nav-link').each(function() {
        $(this).removeClass('green');
    });     
    // fade out the footer
    $('#footer-row').fadeIn();      
    // reset copy
    $('#subnav').html('');
    $('#home-copy').html(result.copy);

    // reset sizes and colors
    $('#home-logo').animate({height: 200}, 0);
    $('#home-copy').animate({height: 200, backgroundColor: '#004329', color: 'white', paddingTop: 0}, 0);
});});

the second one handle the left pages ,

$(document).on('click', '.nav-link-ajax', function() { handleAjax($(this));});function handleAjax(eBtn) {
// get the page we want
getPage = eBtn.attr('href');        
// make AJAX call
$.get('ajax.php', {page: getPage}, function(data) {
    result = $.parseJSON(data);     
    // fill in new page
    $('#subnav').html(result.subnav);
    $('#home-copy').html(result.copy);

    // get document height and get rid of 15% minus the height of the boxes and padding
    docHeight = [$(document).height()-($(document).height()*.15)]-200;

    // change height of content boxes
    $('#home-logo').animate({height: docHeight}, 0);
    $('#home-copy').animate({height: docHeight, backgroundColor: 'white', color: 'gray', paddingTop: 0}, 0);

    // fade out the footer
    $('#footer-row').fadeOut();

    // change background
    $('#content-area').backstretch(result.background);

    // clear old nav
    $('.current_page_item_green').removeClass('current_page_item_green');
    $('.current_page_item').removeClass('current_page_item');

    // update navigation
    if (result.nav_color == 'green') {
        // add green
        $('.nav-link').each(function() {
            $(this).addClass('green');
        });
        $(result.current_page_item).addClass('current_page_item_green');
    } else {
        $('.nav-link').each(function() {
            $(this).removeClass('green');
        });
        $(result.current_page_item).addClass('current_page_item');
    }
});}

My question is that after clicking other webpage then go back to logo page, there are extra spaces on the bottom and on the right side it seems the logo page's background size will follow the background of the previous visited webpage.

how do I fix this issue? thank you

下面的代码包含两部分第一个处理#标识网页

$('#logo').on('click', function() {
// get home info
$.get('ajax.php', {page: 'home'}, function(data) {
    result = $.parseJSON(data);     
    // reset background
    $('#content-area').backstretch(result.background);      
    // reset navigation
    $('.current_page_item_green').removeClass('current_page_item_green');
    $('.current_page_item').removeClass('current_page_item');
    $('.nav-link').each(function() {
        $(this).removeClass('green');
    });     
    // fade out the footer
    $('#footer-row').fadeIn();      
    // reset copy
    $('#subnav').html('');
    $('#home-copy').html(result.copy);

    // reset sizes and colors
    $('#home-logo').animate({height: 200}, 0);
    $('#home-copy').animate({height: 200, backgroundColor: '#004329', color: 'white', paddingTop: 0}, 0);
});});

第二个手柄的左页,

$(document).on('click', '.nav-link-ajax', function() { handleAjax($(this));});function handleAjax(eBtn) {
// get the page we want
getPage = eBtn.attr('href');        
// make AJAX call
$.get('ajax.php', {page: getPage}, function(data) {
    result = $.parseJSON(data);     
    // fill in new page
    $('#subnav').html(result.subnav);
    $('#home-copy').html(result.copy);

    // get document height and get rid of 15% minus the height of the boxes and padding
    docHeight = [$(document).height()-($(document).height()*.15)]-200;

    // change height of content boxes
    $('#home-logo').animate({height: docHeight}, 0);
    $('#home-copy').animate({height: docHeight, backgroundColor: 'white', color: 'gray', paddingTop: 0}, 0);

    // fade out the footer
    $('#footer-row').fadeOut();

    // change background
    $('#content-area').backstretch(result.background);

    // clear old nav
    $('.current_page_item_green').removeClass('current_page_item_green');
    $('.current_page_item').removeClass('current_page_item');

    // update navigation
    if (result.nav_color == 'green') {
        // add green
        $('.nav-link').each(function() {
            $(this).addClass('green');
        });
        $(result.current_page_item).addClass('current_page_item_green');
    } else {
        $('.nav-link').each(function() {
            $(this).removeClass('green');
        });
        $(result.current_page_item).addClass('current_page_item');
    }
});}

我的问题是,在点击其他网页,然后回到标识页面,有额外的空间在底部和右侧似乎标识页面的背景的大小将背景的按照以前的访问。

如何解决这个问题?谢谢你

最佳答案 (Best Answer)

The problem, as I can see it, appears to be with the backstretch plugin. For one thing, it adds a new div element to the DOM every time it is called! That's just one of many issues I see with this plugin; sets position to absolute not fixed, doesn't account for parent position setting, etc.

My suggestion, remove it. Not just the plugin of course, but everywhere in your code that you're calling it. Simply use your IDE (Notepad++, Komodo Edit, etc...) to find all instances of .backstretch( and remove those lines. It looks like backstretch is adding this background div dynamically, so i don't think you'll need to remove any lines of HTML.

FYI I found it called only 4 times in main.js and of course once in the plugins file
Lines [126, 152, 185, 237] in main.js
Plugin exist in line 24 thru 28 of plugins.js

With that done, you should no longer have a background on any page. Double check, go ahead. I'll wait ...

Ok, ya back? No backgrounds but everything else is the same right? Checked console for errors? None? Good. Let's get this party started. The easy way to make a background is to use a div element of position fixed. Give it an inner img element and then simply change the source file as needed. Too easy right? Try this:

HTML

<body>
    <div id="background" style="position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;">
        <img alt="alt text not necessary" src="img/layout/bg_home.png" height="100%" width="100%">
    </div>
    <div ....

Then in your JS, replace that old line (the one you should have deleted by now) of $('#content-area').backstretch(result.background); with something more like:

For your initial setup on line 126 of main.js to:

$('#background img').attr("src", "img/layout/bg_home.png");

For lines [152, 185, 237]

$('#background img').attr("src", result.background);

这个问题,我可以看到它,似乎是与透气的插件。首先,它增加了一个新的div元素的DOM每一次它被称为!这只是许多问题中的一个我看到这个插件的设置位置;absolute不固定的,不考虑父母的位置设定,等。

我的建议是,删除它。不仅仅是课程的插件,但都在你的代码,你叫它。简单地使用你的IDE(Notepad++,科莫多龙编辑,等等)找到的所有实例.backstretch(并删除这些线。它看起来像是添加此透透气背景DIV动态,所以我不认为你需要删除任何行的HTML。

供参考我发现它只有4次,一次main.js插件文件的过程
线[ 126,152,185,237 ]在main.js
在24行28 plugins.js通过插件存在

这样做,你不再有任何页面的背景。双止回,去吧。我会等的…

好吧,你回去吗?没有背景,所有其他的事情都是一样的吗?错误检查控制台?无好的。晚会开始吧。的别急!慢慢来这样的背景是使用div元素的位置fixed。给它一个内IMG元素,然后更改源文件的需要。太容易吗?试试这个:

HTML

<body>
    <div id="background" style="position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;">
        <img alt="alt text not necessary" src="img/layout/bg_home.png" height="100%" width="100%">
    </div>
    <div ....

然后在你的JS,取代旧线(你应该删除现在的一个)$('#content-area').backstretch(result.background);更喜欢:

你的初始设置126号线为main.js:

$('#background img').attr("src", "img/layout/bg_home.png");

线[ 152,185,237 ]

$('#background img').attr("src", result.background);

本文翻译自StackoverFlow,英语好的童鞋可直接参考原文:http://stackoverflow.com/questions/16925989