更改用AJAX加载的元素的CSS

时间：2015-01-19 12:28:15

标签： javascript php css ajax

我的网站上有两个网页：一个欢迎页面，其中包含指向其他页面的链接，以及一个生物页面（以及其他一些页面，无关紧要）。生物页面具有“云”效果，因此背景滚动比内容慢。当您单击生物页面的链接时，欢迎页面使用$ .load（）将生物页面的内容加载到id =“bodyContent”的div中，并且更改了我的css的链接标记，以便现在指向生物的css。还加载了javascript，以便滚动功能起作用。你可以在这里查看：jamesstevenson.co.nf/TestVersion和jamesstevenson.co.nf/TestVersion/bio。

现在，当我将生物页面加载到欢迎页面时，一切看起来都很好，但滚动时没有任何反应。应该发生的是id =“ground”的div获得$ .css（“background-position”，某些东西）如果我查看chrome javascript控制台，我可以键入$（“＃ground”）并且控制台将显示事实上，div确实正确设置了背景位置，但浏览器没有显示任何不同的内容。此外，如果我键入$（“＃ground”）。html（“”），它将返回内部空白的div，但页面上没有任何实际更改。如果我直接导​​航到生物页面并尝试此操作，整个页面将变为空白。

这里发生了什么？如果我发布代码，请告诉我。

编辑：这是代码。我应该首先做到这一点。只是忽略其他问题，这是一项正在进行中的工作。     欢迎页面：               JS - 欢迎                        function changeClasses（）{             var windowRatio = $（window）.width（）/ $（window）.height（），backgroundRatio = 2500/1779;             如果（windowRatio 

    function loadPage(){
        changeClasses();
        $('a').click(function(e){
            e.preventDefault();
            $("#pageScripts").load(this.href, {"requestedContent":"scripts"});
            $("#bodyContent").load(this.href,{"requestedContent":"bodyContent"});
            $("#pagestyle").attr("href", this.href+"/style.css");
            var stateObj = {page:"this.href"};
            window.history.pushState(stateObj,this.id,this.href);
            });
    }
</script>
<script id="pageScripts"></script>
</head>
<body onload="loadPage()" onresize="changeClasses()" link="#FF0000"   vlink="#FF0000">
<div id="topBar"></div>

<div id="bodyContent">  
    <div id="outer">
        <div id="middle">
            <div id="inner">
                <div id="links">Hi there.<br>
                I just use this space to mess around with web design.<br>
                The links below are whatever I have so far. Enjoy!<br>
                <?php //<a id="JS - WIJLT?" href=whatisjameslisteningto>What is James listening to?</a><br> ?>
                <a id ="JS - Bio" href=bio>Bio</a><br>
                <?php //<a id="JS - Exquisite Corpse" href=exquisitecorpse>Exquisite Corpse</a></div> ?>
            </div>
        </div>
    </div>
</div>
</html>

生物：

<?php
$GLOBALS["bodyContent"] = "<div id = \"ground\">
        <div id=\"clouds\">
            <div><br>
                <div id=\"top\">
                    <center>\"James Stevenson hatched from an egg in the year 2015, then travelled back in time to 1999 to prevent the Y2K Bug. He failed.\"</center><br>
                </div>
                <div id=\"bottom\">
                    <div>
                        <div id=\"pic\">
                            <img src=\"http://i.imgur.com/aXoEZCY.jpg\" align=\"left\" width=\"400px\" hspace=\"20\">
                        </div>
                        <div id=\"bio\">
                            After that, I did lots of things. For one, I spent three years at Imperial College London learning to juggle. When I left they also gave me a degree in mathematics, which was nice of them.<br><br>

                            I also did a radio show there, which they liked well enough to let me continue after I graduated. You can tune in at <a target=\"_blank\" href=\"http://icradio.com\">icradio.com</a>, listen to past shows <a target=\"_blank\" href=\"http://www.icradio.com/shows/741/\">here</a>, or follow the show on <a target=\"_blank\" href=\"http://facebook.com/TheCommunistPropagandaShow\">facebook</a>. I also spent a lot of time digging for records and trying to make music, but it never really went anywhere. There might be a half-decent beat on my <a target=\"_blank\" href=\"https://soundcloud.com/thepatchworkorchestra\">soundcloud</a>, or a DJ mix.<br><br>

                            The ony really interesting thing I've done is hitchhike a lot. I hitchhike around Europe when I can, mostly to Switzerland to visit friends. It's always a wild experience. I've been driven by a private detective who investigates the Italian mafia, a doctor who told me the best way to commit suicide, a man who was legally insane, all kinds of people. People have invited me into their homes, bought me meals, taught me to fire guns, snorted crystal meth in front of me, propositioned me but mostly just talked to me. The road is a strange and wonderful place. I try to write about these trips; you can read some of my articles over on <a target=\"_blank\" href=\"http://riptidelab.com/category/james-stevenson/\">riptidelab.com</a>.<br><br>

                            These days I'm trying to figure out what I can do for clean energy. That'll be the next step. For now I'm just learning web design, writing articles and hanging out with my mom.<br><br>

                            This website is really just a place for me to practise web design. Check out how the background scrolls! Neat!
                        </div>
                    </div><br>
                    <div style=\"clear: both;\">
                        <h1>Unsolicited Opinions</h1>
                        <img src=\"http://i.imgur.com/3jXVYma.jpg\" align=\"left\" width=\"250px\" hspace=\"20\">
                        <h2>Favorite Album: The Avalanches, <i>Since I Left You</i></h2>
                        This is the album that first got me into music. It's a mind blowing achievment of crate digging, and it totally bangs. I still notice new details in it to this day. In contrast to most instrumental sampling albums, it's totally upbeat and happy. Every year summer rolls around and I start wondering where the next Avalanches album is. It's been almost 14 years, come on guys!
                    </div>
                    <div style=\"clear: both;\"><br>
                        <img src=\"http://i.imgur.com/Hbwbiv5.jpg\" align=\"left\" width=\"250px\" hspace=\"20\">
                        <h2>A Good Film: Ridley Scott, <i>Blade Runner</i></h2>
                        You should watch this movie. It's absoultely beautiful and immersive, and almost needlessly meloncholic. I like to think Deckard runs away at the end of the film, loses the girl tragically, changes his name to Solo and becomes a smuggler. Any inconsistencies at this point can be explained away with The Force. I would call this my favorite film, but really it's impossible to choose one.
                    </div>
                    <div style=\"clear: both;\"><br>
                        <img src=\"http://i.imgur.com/2C9PEUC.jpg\" align=\"left\" width=\"250px\" hspace=\"20\">
                        <h2>Favorite Book: Joseph Heller, <i>Catch-22</i></h2>
                        Most of <i>Catch-22</i> is complete mayhem. It's driven by the madness of its many incredible characters, each insane in their own beauiful way. The events of the story are all driven by chaos and stupidity, which, for me, seem to drive the real world as well. Some people tell me \"Yeah I read it, but I didn't see what was so special. It just kinda ambles around and doesn't really say anything.\" Fair enough, it's not for everyone. But every sentance in <i>Catch-22</i> rolls right into my mind as if I was already trying to say it but couldn't find the words.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    function calcParallax(tileheight, speedratio, scrollposition) {
      //    by Brett Taylor http://inner.geek.nz/
      //    originally published at http://inner.geek.nz/javascript/parallax/
      //    usable under terms of CC-BY 3.0 licence
      //    http://creativecommons.org/licenses/by/3.0/
      return (-(Math.floor(scrollposition / speedratio) % (tileheight+1)));
    }

    function setScrolling(){
        window.onscroll = function() {
        var posX = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : window.pageXOffset;
        var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
        var groundparallax = calcParallax($(window).width(), 9, posY);
        $(\"#ground\").css(\"backgroundPosition\",\"0 \" + groundparallax + \"px\");
      };
    }

    setScrolling();
    </script>";

if (isset($_REQUEST["requestedContent"]))
    echo $GLOBALS[$_REQUEST["requestedContent"]];
?>
<html>
<header>
<title>Bio</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">    </script>
<script>
    <?php echo $GLOBALS["scripts"]; ?>
</script>
</header>
<body link="#FF0000" vlink="#FF0000">
<div id="bodyContent">
    <?php echo $GLOBALS["bodyContent"] ?>
</div>
</body>
</html>

bio css：

@font-face {
font-family: Typewriter;
src: url(segeo-wp.ttf);
}

body{
margin:0;
}

div{
font-size: 19;
color: white;
font-family: Typewriter;
padding-left: 14px;
}

table{
font-size: 19;
color: white;
font-family: Typewriter;
padding-left: 14px;
}

#bottom {
width: 1050px;
}

.h2{
font-size: 25;
}

.h1{
text-align: center;
}

#bodyContent {
padding:0;
}

#ground{
background-image: url(http://i.imgur.com/ubog5nq.png);
background-repeat: repeat;
background-attachment: fixed;
background-size:100% auto;
width:100%;
display: inline-block;
}

#pic{
float:left;
width:450px;
}

#bio{
float: left;
width:550px;
}

欢迎使用css：

@font-face {font-family:Segeo; src: url('segeo-wp.ttf')}

html{
background: url('http://i.imgur.com/34BNuif.jpg') no-repeat center center   fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: Segeo;
}

#topBar{
postion:fixed;
left:0;
top:0;
width:100%;
height:28px;
z-index: 1;
}

#bodyContent{
height:100%;
width:100%;
}

#outer {
display: table;
position: absolute;
height: 98%;
width: 99%;
}

#middle {
display: table-cell;
vertical-align: middle;
}

#inner {
margin-left: auto;
margin-right: auto;
}

.widthDependant {
font-size: 1.5vw;
text-align: center;
}

.heightDependant {
font-size: 1.5vh;
text-align: center;
}

1 个答案:

答案 0 :(得分：0)

好吧，我删除了一个已解散的代码行： $("#pageScripts").load(this.href, {"requestedContent":"scripts"}); 现在它的工作原理。现在我可以尝试弄清楚发生了什么，但可能会失败并最终继续前进。

相关问题
最新问题