Page Formatting Drop-Down - javascript

I have recently started working on a project for a new webpage. My only problem is that on some web browsers (Apple Safari, Mozilla Firefox) the text and images are shifted of way to far to the left. I wanted to know if I could make a drop-down box that would change the percent the text is to the left.
If there is a more simple way of making the format appear normal on all browsers and monitors please let me know.
My code looks like this:
<html>
<head>
<title>GameLikeBacon.com</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<link rel="icon" type="image/ico" href="http://www.mysite.com/favicon.ico" />
</head>
<body>
<center>
<IMG SRC="background.gif">
</center>
<DIV STYLE="position:absolute; top:100px; left: 15%; width:950px; height:1150px">
<center>
<script type="text/javascript">
// Empty JavaScript Section, Cookies Not Working
</script>
<left><a href="http://www.youtube.com/user/ethan1bacon56?feature=mhee">
<img src="logo.gif" onmouseover="this.src='logos.gif'" onmouseout="this.src='logo.gif'" style="border-style: none"/>
</a>
</left>
<center><a href="Action Games.html"><img src="actionbutton1.gif"
onmouseover="this.src='actionbutton2.gif'" onmouseout="this.src='actionbutton1.gif'" style="border-style: none"/></a>
Adventure
Arcade
Sports
Strategy
</center>
<h2 align="left">Newest Game: Plants vs. Zombies</h2>
<a href="Plants vs. Zombies.html">
<img src="zombie.jpg" style="border-style: none;" align="left">
</a>
<h2 align="right">Featured Game: Fancy Pants 1</h2>
<a href="Fancy Pants 1.html">
<img src="Fancy.jpg" onmouseover="this.src='Fancy2.jpg'" onmouseout="this.src='Fancy.jpg'" style="border-style: none" align="right">
</a>
<right>
<img src="Bacon.gif">
</right>
<center>
<p style="font-size: 35px;">Newest Games</p>
</center>
<center> Plants vs. Zombies
Johnny Upgrade
</center>
<center>
<h1>----------------------------------------</h1>
</center>
<center><img src="Ad.gif" style="border-style: none;">
</center>
<center>
<h6>Want your advertisment here? Contact me at ethandpeck#hotmail.com</h6>
</center>
<img src="splash.gif">
</DIV>
</body>
</html>
Is there a better way to do this or can I use the drop down to decide the percent the text is to the left? By the way, I am 11 so don't downvote me because this may seem simple.

Related

How would I select a group of buttons using classes and if any of them are pressed, a alert pops up

I tried using .addEventListener with querySelector, but for some reason it wouldn't work.
const b = document.querySelector(".buybttn");
b.addEventListener("click",() => {
console.log("button was clicked");
})
The error is Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
I don't understand why the error is happening either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<noscript><p>You need to enable javascript to fully use this website.</p></noscript>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Pups Fan Website!</title>
</head>
<body>
<center>
<div class="navbar">
Plushies!
<a href="./about.html" class="buttonA">About Space Pups</button>
<a class="buttonA" href="Hidden for privacy"> TikTok </a>
</div>
</center>
<h1> Space Pups</h1>
<h2>Stickers</h2>
<center>
<div class="products">
<div class="product">
<center>
<img src="./Images/sticker1.png">
<h3>Gold Sticker!</h3>
<h4>2.99$</h4>
<button class="buybttn">Buy!</button>
</center>
</div>
<div class="product">
<center>
<img src="./Images/sticker2.png">
<h3>Moth Alien Sticker!</h3>
<h4>2.99$</h4>
<button class="buybttn">Buy!</button>
</center>
</div>
<div class="product">
<center>
<img class="SpecialRose"src="./Images/sticker3.png">
<h3>Rose Pup sticker!</h3>
<h4>2.99$</h4>
<button class="buybttn">Buy!</button>
</center>
</div>
</div>
<br>
<div class="products">
<div class="product">
<center>
<img class="SpecialBoss"src="./Images/sticker4.png">
<h3>Alien Boss Sticker!</h3>
<h4>2.99$</h4>
<button class="buybttn">Buy!</button>
</center>
</div>
<div class="product">
<center>
<img class="SpecialDia" src="./Images/sticker5.png">
<h3>Sleepy Dia Sticker!</h3>
<h4>2.99$</h4>
<button class="buybttn">Buy!</button>
</center>
</div>
<div class="product">
<center>
<img class="SpecialDia" src="./Images/sticker6.png">
<h3>Ghost Pup Sticker!</h3>
<h4>2.99$</h4>
<button class="buybttn">Buy!</button>
</center>
</div>
</div>
</center>
</body>
<script src="./script.js">
</script>
</html>
Anyone have some knowledge they can share?
...................................................................
......................................................................................................................................
Thanks, Leo.
Just get all the buttons with document.querySelectorAll and add an event in each one of them with the forEach method and addEventListener. You can access the value of a button with event.target.value.
Try the following .js code:
document.querySelectorAll(".buybttn").forEach(element => element.addEventListener('click', event => alert(`Button ${event.target.value} was clicked`)))

slider misbehaving on initial page load but on refresh works perfectly (chrome)

Running into some odd issue. I have an extremely long horizontally scrolled page...( I know it's not recommended, but it's happened so...) the page has different sections that can be visited with # tags. The last section "lookbook" has a slider coded with js and css. Initial page loads everything perfectly but on getting to the lookbook, none of the javascript works, the page is then refreshed and everything works well. is it because of the defer property in the script tag? Let me know if anything else is required to understand the problem.
(please gonna go into the collections link and then onto BA page and then lookbook.)
here is the website - http://shekleung.com/
HTML of full page -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SHEK LEUNG | BA</title>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<link rel="stylesheet" href="/css/style.css">
<link rel='stylesheet' href='css/mobile.css' />
</head>
<body class="col">
<div class="control">
<p id="pause">▌ ▌</p>
<p id="audio">♩</p>
</div>
<nav class="nav-container">
<div class="nav-bar">
Show
About
Research Films
Stills
Lookbook
</div>
<div class="info overlay">
<div class="text">
<a class="mabtn" href="/MA.html">MA</a>
<a class="capbtn" href="/capsule.html">Capsule</a>
<a class="babtn user-border" href="/BA.html">BA</a>
</div>
Back
</div>
<div class="mobile__header-controls">
<div class="mobile__nav">
<button class="mobile__more">+</button>
<div class="mobile__process-nav">
Show
About
Research Film
Stills
Lookbook
</div>
<div class="mobile__main-nav">
<a class="mabtn" href="/MA.html">MA</a>
<a class="capbtn" href="/capsule.html">Capsule</a>
<a class="babtn user-border" href="/BA.html">BA</a>
</div>
</div>
Back
</div>
</nav>
<main class="mobile__main">
<div class="tab-content animate__animated animate__fadeIn">
<div id="show" data-tab-content>
<div class="video-wrapper">
<video id="catwalk" playsinline autoplay loop preload="metadata">
<source src="/img/BA/Samson Leung Dear you, he said - CSM BA Fashion.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="about" data-tab-content>
<div class="about-text black-text">
<div class="proj-header fade-in">
<p><b>
I realise i didn’t had the luxury of creating a home video as a kid, hence I wanted to
use this opportunity to present my collection in the form of a film.
</b>
</p>
</div>
<div class="about-body">
<p class="fade-in">
Based on the feeling of overwhelmed, I redirected the emotion into a mood film I shot in Japan
named <b>“Dear You”</b>. My project follows the sequel, a second narrative film shot in Hong
Kong
named
“Paper Boys” which follows a “paper” boy who felt overwhelmed and decided to leave his life
behind, however after reaching the epiphany (explosion), he realises in the end that he is still
very much a papery boy at heart. Collaborated with friends at the Royal College of Music, we
composed a poetic soundtrack specifically for my body of work. These films serve as a form of a
self portraiture.
</p>
<p class="fade-in">
In traditional Chinese self portraiture, Shan Shui painting or geology were used
as a form of metaphor of self reflection, hence being inspired by He Jian Chen’s paintings of
rock,
it provides the mood I wanted to achieve within the plot. With the inspiration of the granular
texture from the film, as well as surface texture of the rock, I develop my own material: slime,
a
malleable material that when cool, stays stiff and when it’s steamed, it’s soft as leather
and can be mould and stitched.
</p>
<p class="fade-in">
Texture and grain was explored through several textile techniques, screen printing and spray
paints in order to achieve the gradual change in grains and texture within the collection. I
also
developed an oil paint print transfer technique that allows me to build layers of colours and
opacity and transfer onto the surface any fabric as well as my slime. Although the collection is
mostly worn by men, it primarily focuses on women’s garment details.<br><br>
I hope that as the model walks down the runway, when they are photographed or
filmed, the image will present itself as a still from the “film.” Hence creating a moving film
gallery. The catwalk itself results in the third sequel of my film series.
</p>
</div>
</div>
</div>
<div id="researchFilm-ba" data-tab-content>
<div class=" margin-film video-wrapper-ba black-text fade-in">
<p>Dear You (2017)</p>
<video class="mood2" video controls poster="img/BA/Screenshot 2020-08-24 at 12.10.24 am.png"
preload="metadata">
<source src="/img/BA/dear you,.mp4" type="video/mp4">
</video>
</div>
<div class="video-wrapper-ba black-text fade-in">
<p>Paper Boys (2018)</p>
<video class="mood" video controls poster="/img/BA/Screenshot 2020-08-24 at 12.10.05 am.png"
preload="metadata">
<source src="/img/BA/Paper Boys.mp4" type="video/mp4">
</video>
</div>
<div class="credit-ba">
<button class="credit-icon">(...)</button>
<div class="credit-text">
<p>
Thank you
to my team of helpers
<br><br>
and the following
<br><br>
Collaborators<br>
<br>Film produced with Taka Hata
<br>Accessories produced by Kristy Fan
<br>Soundtrack composed by Zacharias Wolfe
and Friends at Royal College of Music
<br><br>
Look Book
<br>Make Up by Kristina Pavlovic
<br>Look Book photographed by Simonas Berukstis
<br>Slime Making photographed by Oliver Vanes
<br><br>
Show
<br>Internal Show Make Up by Phoebe Walters
<br>Press Show Make Up by Mariko Yamamoto
<br>Supported by L’Oréal Professionnel
<br><br>
Models
<br>Yota Hoshi
<br>Masato Funaoka
<br>Ryan
<br>Youtian Zhang
<br>Tien Ai Guan
<br>Xander Ang
<br>Wing Fung
<br><br>
and the BAFCSM team</p>
</div>
</div>
</div>
<div id="stills-ba" data-tab-content>
<div class="stills-ba">
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/01.jpg" alt="still front">
<img class="back-img" loading="lazy" src="/img/BA/stills/02.jpg" alt="still back">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/03.jpg" alt="still FRONT">
<img class="back-img" loading="lazy" src="/img/BA/stills/04.jpg" alt="still back">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/05.jpg" alt="still front">
<img class="back-img" loading="lazy" src="/img/BA/stills/06.jpg" alt="still 1">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/07.jpg" alt="still 4">
<img class="back-img" loading="lazy" src="/img/BA/stills/08.jpg" alt="still 1">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/09.jpg" alt="still 5">
<img class="back-img" loading="lazy" src="/img/BA/stills/10.jpg" alt="still 1">
</div>
<div class="still-wrapper-ba">
<img class="front-img" loading="lazy" src="/img/BA/stills/11.jpg" alt="still front">
<img class="back-img" loading="lazy" src="/img/BA/stills/12.jpg" alt="still back">
</div>
</div>
</div>
<div id="lookbook" data-tab-content class="black-text">
<div class="lookbook-nav">
<button id="left">←</button>
<button id="right">→</button>
</div>
<div class="lookbook">
<div class="slider">
<img src="/img/BA/lookbook/17.jpg" id="lastClone" alt="">
<img src="/img/BA/lookbook/01.jpg">
<img src="/img/BA/lookbook/02.jpg">
<img src="/img/BA/lookbook/03.jpg">
<img src="/img/BA/lookbook/04.jpg">
<img src="/img/BA/lookbook/05.jpg">
<img src="/img/BA/lookbook/06.jpg">
<img src="/img/BA/lookbook/07.jpg">
<img src="/img/BA/lookbook/08.jpg">
<img src="/img/BA/lookbook/09.jpg">
<img src="/img/BA/lookbook/10.jpg">
<img src="/img/BA/lookbook/11.jpg">
<img src="/img/BA/lookbook/12.jpg">
<img src="/img/BA/lookbook/13.jpg">
<img src="/img/BA/lookbook/14.jpg">
<img src="/img/BA/lookbook/15.jpg">
<img src="/img/BA/lookbook/16.jpg">
<img src="/img/BA/lookbook/17.jpg">
<img src="/img/BA/lookbook/01.jpg" id="firstClone" alt="">
</div>
</div>
</div>
</div>
</main>
<script defer src="/js/collections.js"></script>
</body>
</html>

Swup animations

I am using swup for page transitions but nothing ever happens for my specific website. I got it to work on a simple two-page HTML example website, but doing the exact same thing for my portfolio is not working. I have been trying to figure this out for days now and I'm getting desperate.
What I've Tried
Using the script link from unpkg.
Creating a full start-up document to install Node on my website itself.
Putting the single const variable in a separate document and in the HTML file itself.
Putting the 'main id="swup" class="transition-fade' tag only on a portion of my website where I want it to point.
Checked to make sure there are no typos on my CSS classes.
Changing the file source to start with ./or/or none.
What I Need
I want to make a page transition from the portfolio part of my website to make a fade-in to the next page.
Relevant code
.transition-fade {
opacity: 1;
transition: .5s;
}
html.is-animating .transition-fade {
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght#500&family=Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/CSS/style.css">
<link id="theme-style" rel="stylesheet" href="">
<script defer src="/app.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.13.1/js/all.js"></script>
<script defer src="/index.js" type="text/javascript"></script>
<script defer src="/node_modules/swup/dist/swup.min.js"></script>
<script defer>
const swup = new Swup();
</script>
<title>Kim Lachance</title>
</section>
<main id="swup" class="transition-fade">
<section id="post-section" class="s1">
<div class="main-container">
<h3 style="text-align: center;">Some of my projects</h3>
<div class="post-wrapper">
<div>
<div class="post">
<img class="thumbnail" src="./images/tindog.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Tindog</h6>
<p class="post-intro">Fictional dog dating app website made with a Bootstrap framework</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/omnifood.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Omnifood</h6>
<p class="post-intro">Fictional food delivery app website made with HTML, CSS and jQuery</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/klmedia.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">KL Media</h6>
<p class="post-intro">Website for my own freelancer marketing company</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/drumkit.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Drumkit Javascript</h6>
<p class="post-intro">An exercise I built to flex my javascript muscles</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/dicee.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Dicee Game Javascript</h6>
<p class="post-intro">An exercise I built to flex more javascript muscles</p>
Visit
</div>
</div>
</div>
</div>
</div>
</section>
</main>
My next page also has all of these tags and scripts on them.
Thank you!

Showing specific div when clicked on a button

Me and my friend are building a website to show menus of certain restaurants around our campus. We're trying to make a one page website. There are two main divs on the page. One of them show the restaurants list and the other one is supposed to show the menu of the selected restaurant from the restaurants list.
There are too many questions about this on the web and we've tried countless of fiddles but we couldn't manage to get them working. Last 2 fiddles we've tried are the following:
> https://jsfiddle.net/VpkKn/387/
> https://jsfiddle.net/n53qg/
Our page is: http://178.62.254.14/test/
Can you guide us how to correctly use these fiddles? We've imported the jquery library and tried to put these scripts on different positions on the page including the head tag of the page.
Edit: Code of the page may look a little bit messy because we're also learning the html at the same time. We're sorry for that :)
Summary for the code of the page is as following:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"
type="text/css">
<link href="css/w3.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
<title>Kalkanlı Keyif</title>
</head>
<body>
<header>
<div class="w3-container">
<div id="logocontainer" class="w3-col" style="width: 20%">
<img src="images/logo.png"> </div>
<div id="blankcol" class="w3-col" style="width: 5%">
 </div>
<div id="linkcontainer" class="w3-col" style="width: 75%">
<div class="w3-col links" style="width: 20%">
Link 1</div>
<div class="w3-col links" style="width: 20%">
Link 2</div>
<div class="w3-col links" style="width: 20%">
Link 3</div>
<div class="w3-col links" style="width: 20%">
Link 4</div>
<div class="w3-col links" style="width: 20%">
Link 5</div>
</div>
</div>
</header>
<video id="bgvid" autoplay="" controls=""
loop="" muted="" poster="images/background.jpg">
<source src="http://testweb.creatink.org/video/1.MP4" type="video/mp4">
</video>
<div class="w3-container">
<div id="restlist" class="w3-col" style="width: 20%">
<button id="abarButton" class="restaurantButton" type="button">
A Bar</button>
<button id="artolyeButton" class="restaurantButton" type="button">
A‎®tölye</button>
<button id="burgercityButton" class="restaurantButton"type="button">
Burger City</button>
<button id="cafedaysButton" class="restaurantButton"type="button">
Cafe Days</button>
..... //Buttons continue
</div>
<div id="blankcol" class="w3-col" style="width: 5%">
 </div>
<div id="menu" class="w3-col" style="width: 75%">
<div class="donatello">
<p class="restName">Donatello Pizza</p>
<table class="w3-table">
<?php
/*PHP code for showing the menu of a restaurant
?>
......................
</table>
</div>
</div>
</div>
</body>
</html>
It's called a SPA (Single Page Application).
So here is a jfiddle that displays what your site currently does. Are you wanting help with the functionality as well?
All you do is add all the resources (js/css files etc) one at a time and then add your html (everything in the tag).
You guys should use AngularJS to do this site. It's made for these sort of apps.
http://jsfiddle.net/jz3pLL22/
$('a').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show().siblings("div").hide();
});

How to prevent jquery from removing the <script> tags

How do I prevent the default behaviour of jquery stripping out my JS?
function callBackFunctionLoadPage(data)
{
var data = $(data).find('#content');
alert($(data).html());
$("#content").html(data);
$("#page").fadeTo(100,1);
}
function loadPage(url,parm)
{
//alert(url);
loadNextBackInPage_URL = url;
$("#page").fadeTo(100,.2);
$.post(url,parm,callBackFunctionLoadPage);
}
In my code I want the tags but jquery strips them out:
Original code:
<div id="content">
<div class="post">
<h1 class="title">Kannada on campus - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
<script src="galleria/galleria-1.2.3.min.js"></script>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});
</script>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
But From jquery:
<div id="content">
<div class="post">
<h1 class="title">Kannada on campus - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
EDIT
Here is my actual html page that's getting loaded
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Kannada on campus</title>
<meta name="keywords" content="" />
<link rel="icon" href="images/icon.jpg"/>
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<div id="box"><img src="images/twitter.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://twitter.com/bedupako" border="0" /> <img src="images/youtube.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.youtube.com/user/Bedupako" border="0" /> <img src="images/Facebook Product Profile.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.facebook.com/pages/BEDUPAKO/301073813491?ref=ts" border="0" /> <img src="images/orkut.png" width="50" height="50" alt="Follow us on twitter" longdesc="http://www.orkut.com/Community?cmm=98290522" border="0" />
<!--end box-->
</div>
<body>
<!-- start header -->
<div id="header">
<div id="search"></div>
</div>
<div id="logo">
<h1>Kannada on campus</h1><br /><br />
<h2>Kannada kali, uddaraaagi. Baai muchhikondu bhashe maatadi.</h2>
</div>
<!-- end header -->
<hr />
<!-- start page -->
<div id="page">
<div id="menu">
<ul>
<li>Home</li>
<li>Events</li>
<li>Photos</li>
<li>About</li>
<li>Contact Us</li>
<li>ಕನ್ನಡ</li>
</ul>
</div> <!-- start content -->
<div id="content">
<div class="post">
<h1 class="title">Kannada on campus - photos</h1>
<p class="meta"> </p>
<div class="entry">
<p> </p>
<div id="gallery">
<img src="images/gallery/daya_240909_byreg1.jpg">
<img src="images/gallery/Group 2.jpg">
<img src="images/gallery/IMG00216-20101025-2001.jpg">
<img src="images/gallery/kamal-hassan-in-kannada-02.jpg">
<img src="images/gallery/kannada2.jpg">
<img src="images/gallery/Nayantara-Kannada.jpg">
<img src="images/gallery/P1019502.jpg">
<img src="images/gallery/P1019603.jpg">
<img src="images/gallery/P1019643.jpg">
<img src="images/gallery/P1019644.jpg">
<img src="images/gallery/Zee-Kannada-Presents-Rajotsava.jpg">
</div>
<script src="galleria/galleria-1.2.3.min.js"></script>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 500,
height: 500
});
</script>
</div>
<p class="links"> </p>
</div>
</div>
<!-- end content -->
<!-- start sidebar two -->
<div id="sidebar2" class="sidebar">
<ul>
<li>
<h2>Register you event</h2>
Tell us if you are conducting any kannada event and we will update it to our audience!
</li>
<li>
<h2>Subscription</h2>
<form id="form1" method="post" action="other_files/add_mailing_list.php">
<label>
Subscribe to our mailing list:
<input type="text" name="sub-email" id="sub-email" />
<input type="submit" name="submit" id="submit" value=" Add " />
<input type="hidden" name="redirect" id="redirect" value="%2Fkoc%2F%3Fp%3Dph" />
</label>
</form>
<h2>Current Events</h2>
<ul>
</ul>
<h2>archives</h2>
<ul>
<li>test</li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar two -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<hr />
<!-- start footer -->
<div id="footer">
<p>©2011 All Rights Reserved. • Designed by Ajitah | humans.txt</p>
</div>
<!-- end footer --></body>
</html>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23549810-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
I suggest you do things differently. Firstly, ajax calls are good because they're lightweight, so instead of loading a whole page, you can just grab the updated data and inject it where necessary. If you're getting a giant set of markup including scripts you're essentially using ajax to do a normal http page request. That's like looking at the fast line in the supermarket (10 items or less) and seeing it move faster than the isle you're currently standing in, so you move there. But if you do that for every request, you end up turning the fast lane into a normal lane.
Getting javascript code from the server to execute is usually a sign that you're not thinking correctly about the problem, since your mixing domains horribly.
Firstly, why not just have a function that executes every time you ajax the next page/gallery in? Why do you need to get the code from the server? In accordance with my first point, why not just get an array of new filenames and build the new gallery from those?
If for some reason you feel you want to continue this way anyway (I should point out at this point that executing code in such a manner is not just bad practise but unsafe in certain circumstances), you can extract the code and eval it:
Assuming there's only one block of code, and it's wrapped in <script></script> (which is not taking into account all sorts of whitespace and funny characters):
function callBackFunctionLoadPage(data)
{
...
eval(data.match(/<script>(.*)<\/script>/im)[1]);
}
UPDATE
jquery strips out the javascript but it still executes it:
$('#content').html('<div><script>alert("hello, world!");</script></div>');
So there is almost no reason to want the script tags themselves if their content is already executed...
UPDATE 2 (for non-believers)
var scriptDiv = $('<div><span></span><script>alert("boom!");</script></div>');
alert("not yet"); // the above is created but not executed until added to the DOM
$('body').append(scriptDiv); // there you go, proof that it is executed
alert(scriptDiv.html()); // to prove that the script was stripped
Have you tried using JS's native innerHTML ?
$("#content").get(0).innerHTML = data;
If this works, as davin pointed out, you still have to evaluate the scripts:
eval(data.match(/<script>(.*)<\/script>/im)[1]);
Loading and evaluating SCRIPT form AJAX should work in general.

Categories