hi guy still having problems.. so though re write the question. got my external pages into a div on my index page.. great.. but cant seem to get java scripts to work.. i can get them to work once using this..
<script>
$.ajax({
url: "pages/index.php",
dataType: "html",
success: function(html) {
var target = $('.fademe');
var targetHeight = target.outerHeight();
$(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});
}
});
</script>
but when i go to different page and come back it doesnt work... i put my scripts at the bottom of the main index page
<script>
$.ajax({
url: "pages/index.php",
dataType: "html",
success: function(html) {
$('#st-accordion').accordion();
};
});
</script>
<script>
$.ajax({
url: "pages/index.php",
dataType: "html",
success: function(html) {
$('#st-accordion2').accordion();
}
});
</script>
<script>
$(function () {
$.scrollUp();
});
</script>
<!-- Fade Top Panel -->
<script>
$.ajax({
url: "pages/index.php",
dataType: "html",
success: function(html) {
var target = $('.fademe');
var targetHeight = target.outerHeight();
$(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});
}
});
</script>
<script>
$ajax({
url: "pages/index.php"
dataType: "html",
success: function(html) {
$('#submit').click(function(){
$.post("send.php", $("#mycontactform").serialize(), function(data) { });
$('#success').html('Message sent!');
$('#success').hide(2000);
$('#name1').val('');
$('#telephone').val('');
$('#email').val('');
$('#message').val('');
});
}
});
</script>
<!-- Viberating Icons -->
<script>
$(function() {
var interval = 10;
var duration= 1000;
var shake= 3;
var selector = $('.viberate'); /* Your own container ID*/
$(selector).each(function(){
var elem = this;
var vibrateIndex;
var timeoutIndex;
$(this).hover( /* The button ID */
function(){
vibrateIndex = setInterval(function(){
vibrate(elem);
}, interval, 0);
timeoutIndex = setTimeout(function()
{clearInterval(vibrateIndex)},1000);
},
function(){
clearInterval(vibrateIndex);
clearTimeout(timeoutIndex);
}
);
})
var vibrate = function(elem){
$(elem).stop(true,false)
.css({position: 'relative',
left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px',
top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
});
}
});
</script>
Better to load JS/CSS at first and then load only information that dynamic.
In this case you will have cached JS/CSS and small response. It means better performance.
And of course DO NOT load <html><head>...</head> part. Every page has only one <html> tag and yours already has one. If you load it you need to strip it. It means you'll do unnecessary work and ajax will work slower.
If you using AJAX you need to load only data you need. Less garbage - faster response.
UPDATE
Try this:
<script>
function init(){
// Accodion 1 & 2 -->
$('#st-accordion').accordion();
$('#st-accordion2').accordion();
//Scroll Up -->
$.scrollUp();
// Fade Top Panel -->
var target = $('.fademe');
var targetHeight = target.outerHeight();
$(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});
// Contact Form Send -->
$('#submit').click(function(){
$.post("send.php", $("#mycontactform").serialize(), function(data) { });
$('#success').html('Message sent!');
$('#success').hide(2000);
$('#name1').val('');
$('#telephone').val('');
$('#email').val('');
$('#message').val('');
});
// Viberating Icons -->
var interval = 10;
var duration= 1000;
var shake= 3;
var selector = $('.viberate'); /* Your own container ID*/
$(selector).each(function(){
var elem = this;
var vibrateIndex;
var timeoutIndex;
$(this).hover( /* The button ID */
function(){
vibrateIndex = setInterval(function(){
vibrate(elem);
}, interval, 0);
timeoutIndex = setTimeout(function(){clearInterval(vibrateIndex)},1000);
},
function(){
clearInterval(vibrateIndex);
clearTimeout(timeoutIndex);
}
);
})
var vibrate = function(elem){
$(elem).stop(true,false)
.css({position: 'relative',
left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px',
top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'
});
}
$("#posts").masonry({
itemSelector: '.post',
isAnimated: true,
columnWidth: function(containerWidth) {
var width = $(window).width();
var col = 300;
if (width < 1200 && width >= 980) {
col = 240;
} else if (width < 980 && width >= 768) {
col = 186;
}
return col;
}
});
}
</script>
I put all JS in one init() function. Now after your ajax is loaded call that function.
And check syntax I maybe lost some brackets.