cihan17 cihan17 - 3 months ago 7
CSS Question

sidebar not showing in the right place until the loading of the site finish

i am a beginner in javascript, and in wordpress.

i have the template Detube, which i want to modify. i have to make the sidebar semi fixed and the scroll infinite.

those modification are made but it doesn't work in the way that i want. The sidebar, appears on the left when oppening the site, and after few seconds it regains its place on the right. you can see the result here

i want to fix that issue

the code of the script is below

jQuery(document).ready(function($) {
$=javascript.noConflict();
$(document).scroll(function() {

var scrollPosition = $(document).scrollTop();
var scrollReference = 2100;
if (scrollPosition >= scrollReference) {
$('#dpe_fp_widget-4').css('position', 'fixed');
$('#dpe_fp_widget-4').css('top', '100px');
$('#dpe_fp_widget-4').css('left', 'initial');

$('#dpe_fp_widget-5').css('position', 'fixed');
$('#dpe_fp_widget-5').css('top', '100px');
$('#dpe_fp_widget-5').css('left', 'initial');

$('#text-6').css('position', 'fixed');
$('#text-6').css('top', '550px');
$('#text-6').css('left', 'initial');

$('#text-7').css('position', 'fixed');
$('#text-7').css('top', '550px');
$('#text-7').css('left', 'initial');

} else {
$('#dpe_fp_widget-4').css('position', 'absolute');
$('#dpe_fp_widget-4').css('top', '841px');
$('#dpe_fp_widget-4').css('left', '0px');

$('#dpe_fp_widget-5').css('position', 'absolute');
$('#dpe_fp_widget-5').css('top', '841px');
$('#dpe_fp_widget-5').css('left', '0px');

$('#text-6').css('position', 'absolute');
$('#text-6').css('top', '1291px');
$('#text-6').css('left', '0px');

$('#text-7').css('position', 'absolute');
$('#text-7').css('top', '1291px');
$('#text-7').css('left', '0px');
};
});

});


i call the script in the file function.php

function my_loader_jquery() {

if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '');
wp_enqueue_script('jquery');
}
}

add_action('init', 'my_loader_jquery');

function theme_js() {

wp_enqueue_script( 'sidebar-fixe', get_template_directory_uri() . '/js/sidebar-fixe.js', array() );

wp_enqueue_script( 'infinite-scroll', get_template_directory_uri() . '/js/infinite-scroll.js', array() );

}


in the css

#sidebar {
width:336px;
float:right;
}


/*== Sidebar
*=================================*/
#sidebar .widget{width:300px; padding-top: 30px;}


Note:Please excuse my english

Answer

Have you tried to call the script on window.load() instead of ready().

Comments