I am having issues with a WordPress template that has not allowed me to place the slider underneath the header ID.
I have looked everywhere but everything I do just does not work.
Header CSS
#header {
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 212px;
margin: 0px auto 0px auto;
z-index: 1;
position: relative;
}
Slider main CSS
#contback {
background: rgba(0, 0, 0, 0.4);
margin-bottom: 0px;
width: 100%;
z-index:0;
position: relative;
}
html is too long to post here so i'll just post the main parts.
!-- ### BODY #### -->
<body class="home page page-id-11 page-template-default logged-in admin-bar no-customize-support">
<!-- Header -->
<div id="header">
<div class="header-row fixed">
<div id="logo">
<img src="http://radiobreakout.com.au/wp-content/themes/beaton/images/logo.png" alt="logo" />
</div><!-- end #logo -->
<div id="evhead">
<div class="evhead-cont">
<a href="http://radiobreakout.com.au/?event=radio-breakout">
<div class="evhead-bg"></div>
<img src="http://radiobreakout.com.au/wp-content/themes/beaton/images/no-cover/evhead.png" alt="no-cover" />
<div class="evhead-date">01 Jan</div>
<div class="evhead-week">Friday</div>
<div class="evhead-loc"><span></span></div>
</a>
</div><!-- end .evhead-cont -->
</div><!-- end #evhead -->
</div><!-- end .header-row fixed -->
<div id="menu">
<div class="menu-row">
<div id="wizemenu" class="menu-main-container"><ul class="megamenu"><li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-11 current_page_item active">Home</li>
</ul></div>
</div><!-- end .menu-row -->
</div><!-- end #menu -->
</div><!-- end #header -->
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#radio").flashradio({
themecolor: "#00cab6",
channelurls: "163.47.16.24:8000/stream",
scroll: "AUTO",
autoplay: "TRUE",
html5chrome: "TRUE",
debug: "TRUE",
startvolume: "100"
});
$(".radio-wz-open-hidden").click(function() {
$("#radio-wz #radio-wz-col").slideToggle({
direction: "up"
}, 100);
$(this).toggleClass("clientsClose");
});
$("#radio-wz-col").show();
function mouseHandler(e) {
if ($(this).hasClass("radio-wz-hidden-open")) {
$(this).removeClass("radio-wz-hidden-open");
} else {
$(".radio-wz-hidden-open").removeClass("radio-wz-hidden-open");
$(this).addClass("radio-wz-hidden-open");
}
}
function start() {
$(".radio-wz-open-hidden").bind("click", mouseHandler);
}
$(document).ready(start);
});
</script>
<div id="radio-wz">
<div id="radio-wz-hide">
<div class="radio-wz-open-hidden"></div>
</div><!-- end #radio-wz-hide -->
<div id="radio-wz-col">
<div id="radio-wz-source">
<div id="radio" style="height:54px; width:1190px;"></div>
</div><!-- end #radio-wz-source -->
</div><!-- end #radio-wz-col -->
</div><!-- end #radio-wz -->
<!-- ContBack -->
<div id="contback">
<div id="slider">
<div id="slider-full">
<ul>
<li data-transition="random" data-masterspeed="1500" data-delay="10000" data-thumb="http://radiobreakout.com.au/wp-content/uploads/2015/11/nonestophitz.jpg">
<img src="http://radiobreakout.com.au/wp-content/uploads/2015/11/nonestophitz.jpg" alt="NONSTOP HITS" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-bgfit="110" data-bgfitend="100">
<div class="sld-bg"></div>
<div class="tp-caption" data-x="20" data-speed="1100" data-start="1500" data-easing="Linear.easeNone" data-endspeed="500" data-endeasing="Power4.easeIn" style="z-index:3; max-width:350px; white-space: normal !important;">
<div class="sld-full">
<div class="sld-full-title">NONSTOP HITS</div>
<div class="sld-full-desc"></div>
<div class="sld-full-date">Wednesday, 18 November 2015</div>
</div>
</div><!-- end .tp-caption -->
</li><!-- end li.slide -->
<li data-transition="random" data-masterspeed="1500" data-delay="10000" data-thumb="http://radiobreakout.com.au/wp-content/uploads/2015/11/melbourne.jpg">
<img src="http://radiobreakout.com.au/wp-content/uploads/2015/11/melbourne.jpg" alt="Melbourne Slide" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-bgfit="110" data-bgfitend="100">
<div class="sld-bg"></div>
<div class="tp-caption" data-x="20" data-speed="1100" data-start="1500" data-easing="Linear.easeNone" data-endspeed="500" data-endeasing="Power4.easeIn" style="z-index:3; max-width:350px; white-space: normal !important;">
<div class="sld-full">
<div class="sld-full-title">Melbourne Slide</div>
<div class="sld-full-desc"></div>
<div class="sld-full-date">Wednesday, 18 November 2015</div>
</div>
</div><!-- end .tp-caption -->
</li><!-- end li.slide -->
<li data-transition="random" data-masterspeed="1500" data-delay="10000" data-thumb="http://radiobreakout.com.au/wp-content/uploads/2015/11/sydey-1300x580.jpeg">
<img src="http://radiobreakout.com.au/wp-content/uploads/2015/11/sydey-1300x580.jpeg" alt="Shows" data-kenburns="on" data-duration="15000" data-ease="Linear.easeNone" data-bgfit="110" data-bgfitend="100">
<div class="sld-bg"></div>
<div class="tp-caption" data-x="20" data-speed="1100" data-start="1500" data-easing="Linear.easeNone" data-endspeed="500" data-endeasing="Power4.easeIn" style="z-index:3; max-width:350px; white-space: normal !important;">
<div class="sld-full">
<div class="sld-full-title">Shows</div>
<div class="sld-full-desc">shows</div>
<div class="sld-full-date">Wednesday, 18 November 2015</div>
</div>
</div><!-- end .tp-caption -->
</li><!-- end li.slide -->
</ul>
</div><!-- end #slider-full -->
</div><!-- end #slider -->
The opacity is changing your stacking order so in this case z-index is not usefull. Check this link for more info.
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Related
I am looking for a way to use fullpage.js as slideshow with a fixed sidebar on the left containing an "INFO" button which on click slides in a div with the information referring to the Section/Image, visible in the viewport.
I am using the basic setUp for fullpage.js with the div container "fullpage" including the "section" divs. Each section has a bg-image and a div with the capture to the image.
The sidebar is fixed on the left side and outside the "fullpage" container with the following markup.
<!-- Fixed Navigation Left -->
<aside class="sidebar fixed" id="gallery-nav">
<a class="gallery-nav-button-class float-left scrollDown"><i class="fa fa-long-arrow-left"></i></a>
<div class="button-group toggle-menu">
<i class="fa fa-long-arrow-down"></i> <span>INFO</span>
<a class="gallery-nav-button-class gallery-open"><i class="fa fa-long-arrow-down"></i> <span>GALERIE</span></a>
<i class="fa fa-caret-left scrollDown"></i>
<!-- Gallery image count 4 -->
<span>1/15</span>
<i class="fa fa-caret-right scrollUp"></i>
<h3><span>GELÄNDESPORT</span></h3>
</div>
<a data-menuanchor="Menu" href="index.html#Menu" class="gallery-nav-button-class menu-btn-fixed"> <span>MENU</span> <i class="fa fa-long-arrow-right"></i></a>
</aside>
Can anybody help me with the jquery code to solve this problem?
You can find the basic layout in the Image below.
Try This
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.site-nav{
height: 100vh;
width: 135px;
background-color: pink;
position: fixed;
}
body, html, .sidebar, .body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
.sidebar{
background-color: green;
width: 10%;
float: left;
height: 100%;
position: fixed;
}
.body{
background-color: white;
float:left;
width:90%;
height:100%;
}
#section-one {
height: 100vh;
width: 100%;
background-color: pink;
}
#section-two {
height: 100vh;
width: 100%;
background-color: red;
}
#section-three {
height: 100vh;
width: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="sidebar">
</div>
<div id="section-one">
</div>
<div id="section-two">
</div>
<div id="section-three">
</div>
</body>
</html>
Here is an screenshot of my site. I will put it on a server as soon as I can. And add the link to it.
Preview
Here is the HTML code of the site.
<!-- Fixed Navigation Left -->
<aside class="sidebar fixed" id="gallery-nav">
<a class="gallery-nav-button-class float-left scrollDown"><i class="fa fa-long-arrow-left"></i></a>
<div class="button-group toggle-menu">
<a class="gallery-nav-button-class"><i class="fa fa-long-arrow-down"></i> <span>INFO</span></a>
<a class="gallery-nav-button-class gallery-open"><i class="fa fa-long-arrow-down"></i> <span>GALERIE</span></a>
<a class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-left scrollDown"></i></a>
<!-- gallery image count 4 PHP Issue -->
<span>1/15</span>
<a class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-right scrollUp"></i></a>
<h3><span>GELÄNDESPORT</span></h3>
</div>
<a data-menuanchor="Menu" href="index.html#Menu" class="gallery-nav-button-class menu-btn-fixed"> <span>MENU</span> <i class="fa fa-long-arrow-right"></i></a>
</aside>
<div id="fullpage">
<!-- section 1 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<h2>1955—60</h2>
<p class="lead">die erste liebe<br>und Schule aller Renner</p>
<hr>
<a class="button scrollDown">WEITER</a>
</div>
<div class="small-12 medium-6 columns" id="glsp-1">
</div>
</div>
</div>
<!-- section 2 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<h2>Bruno Beuss</h2>
<hr>
<a class="button scrollDown">WEITER</a>
</div>
<div class="small-12 medium-6 columns wow fadeIn" id="glsp-2">
</div>
</div>
</div>
<!-- section 3 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<p class="lead">DIE ABSOLUTE BEHERRSCHUNG DER...</p>
<hr>
<a class="button scrollDown">GALERIE</a>
</div>
<div class="small-12 medium-6 columns wow fadeIn" id="glsp-3">
</div>
</div>
</div>
<!-- section 4 Gallery Start-->
<div class="section">
<div class="row gallery-content-box wow slideInLeft fadeIn">
<div class="wow fadeIn" id="glsp-4">
</div>
</div>
</div>
<!-- section 5 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s" id="glsp-5-1">
</div>
<div class="medium-6 columns wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s" id="glsp-5-2">
</div>
</div>
</div>
</div>
<!-- Gallerie Lightbox -->
<div class="medium-3 columns toggle-lighbox hide animated slideOutLeft" id="gallery-lightbox">
<div class="row gallery-lightbox-innerwrap">
<ul class="medium-11" id="gallery-lightbox-menu">
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
</ul>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/fullpage.js/vendors/jquery.slimscroll.min.js"></script>
<script src="bower_components/fullpage.js/jquery.fullPage.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="bower_components/wow/dist/wow.js"></script>
<script src="js/app.js"></script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'fifthPage'],
menu: '#gallery-lightbox-menu',
resize: false,
animateAnchor:false,
scrollOverflow: true,
autoScrolling:true,
responsive: 900,
fitSection: false,
navigation:true,
navigationPosition: 'right',
navigationTooltips: ['firstSection', 'secondSection'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
continuousVertical:true,
scrollBar: true,
css3: true,
afterLoad: function (anchorLink, index) {
// #toggle-menu for section 4...
if (index == 4) {
$(".toggle-menu").css('visibility','visible')
}
},
onLeave: function (index, nextIndex, direction) {
//going from section 3 to 4
if (index == 3 && direction == 'down') {
//whatever
}
//going form section 4 to 3
else if (index == 4 && direction == 'up') {
$(".toggle-menu").css('visibility','hidden')
}
}
});
// toggle-lighbox-opener
$('.gallery-open').click(function() {
if($('.toggle-lighbox').hasClass('slideOutLeft'))
{
$('.toggle-lighbox').addClass('slideInLeft').removeClass('hide slideOutLeft');
}
else
{
$('.toggle-lighbox').addClass('slideOutLeft').removeClass('slideInLeft');
}
});
// slimscroll.js
$(function(){
$('.gallery-lightbox-innerwrap').slimScroll({
height: '100vh',
size: '7px',
position: 'right',
color: '#87704c',
alwaysVisible: true,
// distance: '-10px',
// start: $('#child_image_element'),
railVisible: true,
railColor: '#87704c',
railOpacity: 0.3,
wheelStep: 10,
allowPageScroll: true,
disableFadeOut: true,
});
});
$(document).on('click', '.scrollDown', function(){
$.fn.fullpage.moveSectionDown();
});
$(document).on('click', '.scrollUp', function(){
$.fn.fullpage.moveSectionUp();
});
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 100, // default
mobile: true, // default
live: true // default
}
)
wow.init();
});
</script>
I am creating a website with bootstrap and i am trying to integrate the Jssor's nearby image partial visible Slider in a page. You can see the page live in this link.
The problem with the specific slider is that on page load, only the first picture will load. Then, i have to click on the slider for the rest of the pictures to load.
Unfortunately, i do not have javascript knowledge in order to deal with this problem on my own so i really hope someone can help me. Thank everyone in advance for their time.
html-file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Artic Design - Kingdom Tower Riyadh</title>
<link rel="icon" href="../../images/favicon.ico" />
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../../css/navbar.css">
<link rel="stylesheet" type="text/css" href="../../css/main.css">
<link rel="stylesheet" type="text/css" href="../../css/carousel-custom-navigation-buttons.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- use jssor.slider.mini.js (40KB) instead for release -->
<!-- jssor.slider.mini.js = (jssor.js + jssor.slider.js) -->
<script type="text/javascript" src="../../js/jssor-slider/jssor.js"></script>
<script type="text/javascript" src="../../js/jssor-slider/jssor.slider.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<style>
.bubble { position: absolute; left: 93px; top: 21px; width: 135px; height: 84px; text-align: center;}
.vertical-align-middle { position: relative; font-size: 11px; margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
</style>
<![endif]-->
</head>
<body>
<!-- Navigation Start -->
<div class="navbar-wrapper navbar navbar-inverse navbar-static-top nav-top-height" role="navigation">
<nav>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs"><a class="navbar-brand text-center" href="../index.html"><p>ARTIC DESIGN</p></a></span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>NEWS</li>
<li class="active">PROJECTS</li>
<li>CREATIVE SERVICES</li>
<li>TEAM</li>
<li>CONTACT US</li>
</ul>
</div>
</nav>
</div>
<!-- Navigation End -->
<!-- Main Body Start -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-2 hidden-xs">
<div class="pull-right-md pull-right-lg">
<!-- Project Text Info -->
<div class="pull-right-md pull-right-lg">
<section class="project-info">
<p class="project-title tmarg-twenty">KINGDOM TOWER RIYADH, KSA</p>
<p class="project-info-text">Η φωτιστική μας προσέγγιση βασίστηκε στο να τονίσουμε τις τρεις ζώνες του κτηρίου καθλως και την οροφή του. Το υπόλοιπο σώμα του κτηρίου έχει έναν υποτυπώδη αλλά στοχευμένο φωτισμό ετσι ώστε τη νύχτα να “βυθίζεται” στο backround του ουρανού.</p>
<p class="project-crew">
<span class="project-crew-property">Lighting Designer:<span><br>
<span class="project-crew-value">George Tellos</span><br>
<span class="project-crew-property">Constructor:</span><br>
<span class="project-crew-value">Masic Holding</span><br>
<span class="project-crew-property">Location:</span><br>
<span class="project-crew-value">Jeddah KSA</span>
</p>
</section>
</div>
</div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-sm-12 col-md-9 col-lg-10 carousel-col">
<!-- Project Carousel -->
<script>
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: false,
$PauseOnHover: true, //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false
$ArrowKeyNavigation: true, //Allows arrow key to navigate or not
$SlideWidth: 600, //[Optional] Width of every slide in pixels, the default is width of 'slides' container
//$SlideHeight: 300, //[Optional] Height of every slide in pixels, the default is width of 'slides' container
$SlideSpacing: 0, //Space between each slide in pixels
$Cols: 2, //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
$Align: 100, //The offset position to park slide (this options applys only when slideshow disabled).
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 800));
else
window.setTimeout(ScaleSlider, 30);
};
ScaleSlider();
jssor_slider1.$Play();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 100%; overflow: hidden;">
<!-- Slides Container -->
<div id="slider1_container-inside" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 100%; overflow: hidden;"> <!-- height: 1000px; -->
<div><img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/Kingdom Tower Riyadh, Kingdom of Saudi Arabia.png" /></div>
<div><img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/1.JPG" /></div>
<div><img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/2.JPG" /></div>
</div>
<div id="arrow_container" class="bubble">
<!-- Arrow Left -->
<div class="vertical-align-middle">
<span u="arrowleft" class="jssoral" style="width: 40px; height: 50px; left: 30px;"></span> <!-- top: 500px; -->
</div>
<!-- Arrow Right -->
<div class="vertical-align-middle">
<span u="arrowright" class="jssorar" style="width: 40px; height: 50px; right: 30px;"></span> <!-- top: 500px; -->
</div>
<!-- Arrow Navigator Skin End -->
</div>
</div>
<!-- Jssor Slider End -->
</div>
<div class="col-xs-12 visible-xs">
<div class="pull-right-md pull-right-lg">
<!-- Project Text Info -->
<div class="pull-right-md pull-right-lg">
<section class="project-info">
<p class="project-title">KINGDOM TOWER RIYADH, KSA</p>
<p class="project-info-text">Η φωτιστική μας προσέγγιση βασίστηκε στο να τονίσουμε τις τρεις ζώνες του κτηρίου καθλως και την οροφή του. Το υπόλοιπο σώμα του κτηρίου έχει έναν υποτυπώδη αλλά στοχευμένο φωτισμό ετσι ώστε τη νύχτα να “βυθίζεται” στο backround του ουρανού.</p>
<p class="project-crew">Lighting Designer: GEORGE TELLOS<br>Constructor: MASIC HOLDING<br>Location: JEDDAH KSA</p>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- Main Body End -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../js/bootstrap.min.js"></script>
<script>-->
<!-- this script resizes the slider's height so it will cover all of the usable browser's height.
$(window).resize(function WinResize1()
{
var usable_height = $(window).height();
$('#slider1_container').height(usable_height-70);
$('#slider1_container-inside').height(usable_height-70);
//alert(usable_height);
})
$(window).resize();
</script>
<script>-->
<!-- this script resizes the bubble's height so it will be the same as the slider's height in order for the carousel's arrow to be succesfully vertical-aligned -->
$(window).resize(function WinResize1()
{
var carousel_height = $('#slider1_container').height();
$('#arrow_container').height(carousel_height);
//alert(carousel_height);
})
$(window).resize();
</script>
<script>
jssor_slider1_starter('slider1_container');
</script>
</body>
</html>
Please remove the following code, it is useless.
<script>
jssor_slider1_starter('slider1_container');
</script>
Please specify fixed size for slider1_container and slides container, note that the 100% is not correct for jssor slider. See
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;">
<!-- Slides Container -->
<div id="slider1_container-inside" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
i found a satisfactory solution to my problem. this solution won't work on the xs screen of the bootstrap for some reason so i had to use the traditional bootstrap carousel in the xs screen.
knowing that the Jssor slider should initialize with fixed size, the idea was to dynamically insert the "fixed size" on the Jssor Slider on each page load. see the code below.
i have zero javascript experience so it may turn out to not be the best solution out there. as far as i am concerned it is the only one though.
i really hope that Jssor will use this to release a V2 of his slider.
waiting for feedback.
thank you again all for your time.
<!-- Main Body Start -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-2 hidden-xs">
<div class="pull-right-md pull-right-lg">
<!-- Project Text Info -->
<div class="pull-right-md pull-right-lg">
<section class="project-info">
<p class="project-title tmarg-twenty">KINGDOM TOWER RIYADH, KSA</p>
<p class="project-info-text">On the roof of the highest and most impressive building of Saudi Arabia light sources were installed, supplied by the TIC Riyadh.</p>
<p class="project-crew">
<span class="project-crew-property">Lighting Designer:<span><br>
<span class="project-crew-value">George Tellos</span><br>
<span class="project-crew-property">Constructor:</span><br>
<span class="project-crew-value">Masic Holding</span><br>
<span class="project-crew-property">Location:</span><br>
<span class="project-crew-value">Jeddah KSA</span>
</p>
</section>
</div>
</div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-sm-12 col-md-9 hidden-lg carousel-col">
<div id="carousel-project" class="carousel slide" data-interval=3000 data-keyboard=true data-pause="hover" data-wrap=true>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-project" data-slide-to="0" class="active"></li>
<li data-target="#carousel-project" data-slide-to="1"></li>
<li data-target="#carousel-project" data-slide-to="2"></li>
</ol>
<!-- Wrapper Start: slider images and captions -->
<div class="carousel-inner">
<div class="item active">
<img src="../../images/projects/06 THE KINGDOM TOWER RIYADH/Kingdom Tower Riyadh, Kingdom of Saudi Arabia.png" width="789" height="1080" alt=""/>
</div>
<div class="item">
<img src="../../images/projects/06 THE KINGDOM TOWER RIYADH/1.JPG" width="717" height="1080" alt=""/>
</div>
<div class="item">
<img src="../../images/projects/06 THE KINGDOM TOWER RIYADH/2.JPG" width="717" height="1080" alt=""/>
</div>
</div>
<!-- Wrapper End: slider images and the captions -->
<!-- Carousel Custom Controls Start -->
<a class="left carousel-control" href="#carousel-project" role="button" data-slide="prev">
<span u="arrowleft" class="jssoral" style="width: 55px; height: 55px; top: 50%; left: 8px;">
</span>
</a>
<a class="right carousel-control" href="#carousel-project" role="button" data-slide="next">
<span u="arrowright" class="jssorar" style="width: 55px; height: 55px; top: 50%; right: 8px">
</span>
</a>
<!-- Carousel Custom Controls End -->
<!-- Carousel End -->
</div>
</div>
<div class="col-lg-10 visible-lg carousel-col">
<!-- Project Carousel -->
<script>
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: 0,
$PauseOnHover: true, //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false
$ArrowKeyNavigation: true, //Allows arrow key to navigate or not
$SlideWidth: 600, //[Optional] Width of every slide in pixels, the default is width of 'slides' container
//$SlideHeight: 300, //[Optional] Height of every slide in pixels, the default is width of 'slides' container
$SlideSpacing: 0, //Space between each slide in pixels
$Cols: 2, //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
$Align: 100, //The offset position to park slide (this options applys only when slideshow disabled).
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
function ScaleSlider() {
var usable_width = window.innerWidth;
var carousel_width = usable_width-(usable_width*0.33); //because of the left column
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.min(parentWidth, carousel_width));
else
window.setTimeout(ScaleSlider, 30);
};
ScaleSlider();
jssor_slider1.$Play();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; overflow: hidden;">
<!-- Slides Container -->
<div id="slider1_container-inside" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; overflow: hidden;"> <!-- height: 1000px; -->
<div><img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/Kingdom Tower Riyadh, Kingdom of Saudi Arabia.png" /></div>
<div><img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/1.JPG" /></div>
<div><img class="img-responsive" u="image" src="../../images/projects/06 THE KINGDOM TOWER RIYADH/2.JPG" /></div>
</div>
<div id="arrow_container" class="bubble">
<!-- Arrow Left -->
<div class="vertical-align-middle">
<span u="arrowleft" class="jssoral" style="width: 40px; height: 50px; left: 30px;"></span> <!-- top: 500px; -->
</div>
<!-- Arrow Right -->
<div class="vertical-align-middle">
<span u="arrowright" class="jssorar" style="width: 40px; height: 50px; right: 30px;"></span> <!-- top: 500px; -->
</div>
<!-- Arrow Navigator Skin End -->
</div>
</div>
<!-- Jssor Slider End -->
</div>
<div class="col-xs-12 visible-xs">
<div class="pull-right-md pull-right-lg">
<!-- Project Text Info -->
<div class="pull-right-md pull-right-lg">
<section class="project-info">
<p class="project-title">KINGDOM TOWER RIYADH, KSA</p>
<p class="project-info-text">On the roof of the highest and most impressive building of Saudi Arabia light sources were installed, supplied by the TIC Riyadh.</p>
<p class="project-crew">Lighting Designer: GEORGE TELLOS<br>Constructor: MASIC HOLDING<br>Location: JEDDAH KSA</p>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- Main Body End -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../js/bootstrap.min.js"></script>
<script>
$(window).resize(function WinResize1()
{
var usable_height = $(window).height();
var carousel_height = usable_height-55; //beacuse of the navbar
$('#slider1_container').height(carousel_height);
$('#slider1_container-inside').height(carousel_height);
var usable_width = window.innerWidth;
var carousel_width = usable_width-(usable_width*0.33); //because of the left column
$('#slider1_container').width(carousel_width);
$('#slider1_container-inside').width(carousel_width);
$('#arrow_container').height(carousel_height);
//alert(carousel_height);
//alert(carousel_width);
})
$(window).resize();
</script>
On phone view The Navbar works just File in Bootply but it is not expanding in my site.
Here is the full page Code-
<html lang="en"><head>
<title>Your store</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="generator" content="nopCommerce">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link href="/themes/ProcoDefault/Content/jquery.datetimepicker.css" rel="stylesheet" type="text/css">
<link href="/themes/ProcoDefault/Content/bootstrap-3.2.0/CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/Content/jquery-ui-themes/smoothness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css">
<script id="facebook-jssdk" src="//connect.facebook.net/en_US/all.js#xfbml=1"></script><script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/Scripts/jquery-migrate-1.2.1.min.js"></script>
<script src="/Scripts/public.common.js"></script>
<script src="/Scripts/public.ajaxcart.js"></script>
<script src="/Scripts/jquery.datetimepicker.js"></script>
<link rel="shortcut icon" href="http://localhost:38451/favicon.ico">
<!--Powered by nopCommerce - http://www.nopCommerce.com-->
<!--Copyright (c) 2008-2013-->
<style type="text/css">.fb_hidden{position:absolute;top:-10000px;z-index:10001}.fb_invisible{display:none}.fb_reset{background:none;border:0;border-spacing:0;color:#000;cursor:auto;direction:ltr;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal}.fb_reset>div{overflow:hidden}.fb_link img{border:none}
.fb_dialog{background:rgba(82, 82, 82, .7);position:absolute;top:-10000px;z-index:10001}.fb_reset .fb_dialog_legacy{overflow:visible}.fb_dialog_advanced{padding:10px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px}.fb_dialog_content{background:#fff;color:#333}.fb_dialog_close_icon{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 0 transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif);cursor:pointer;display:block;height:15px;position:absolute;right:18px;top:17px;width:15px}.fb_dialog_mobile .fb_dialog_close_icon{top:5px;left:5px;right:auto}.fb_dialog_padding{background-color:transparent;position:absolute;width:1px;z-index:-1}.fb_dialog_close_icon:hover{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -15px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif)}.fb_dialog_close_icon:active{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -30px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v2/yL/r/s816eWC-2sl.gif)}.fb_dialog_loader{background-color:#f2f2f2;border:1px solid #606060;font-size:24px;padding:20px}.fb_dialog_top_left,.fb_dialog_top_right,.fb_dialog_bottom_left,.fb_dialog_bottom_right{height:10px;width:10px;overflow:hidden;position:absolute}.fb_dialog_top_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 0;left:-10px;top:-10px}.fb_dialog_top_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -10px;right:-10px;top:-10px}.fb_dialog_bottom_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -20px;bottom:-10px;left:-10px}.fb_dialog_bottom_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ye/r/8YeTNIlTZjm.png) no-repeat 0 -30px;right:-10px;bottom:-10px}.fb_dialog_vert_left,.fb_dialog_vert_right,.fb_dialog_horiz_top,.fb_dialog_horiz_bottom{position:absolute;background:#525252;filter:alpha(opacity=70);opacity:.7}.fb_dialog_vert_left,.fb_dialog_vert_right{width:10px;height:100%}.fb_dialog_vert_left{margin-left:-10px}.fb_dialog_vert_right{right:0;margin-right:-10px}.fb_dialog_horiz_top,.fb_dialog_horiz_bottom{width:100%;height:10px}.fb_dialog_horiz_top{margin-top:-10px}.fb_dialog_horiz_bottom{bottom:0;margin-bottom:-10px}.fb_dialog_iframe{line-height:0}.fb_dialog_content .dialog_title{background:#6d84b4;border:1px solid #3b5998;color:#fff;font-size:14px;font-weight:bold;margin:0}.fb_dialog_content .dialog_title>span{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/yd/r/Cou7n-nqK52.gif) no-repeat 5px 50%;float:left;padding:5px 0 7px 26px}body.fb_hidden{-webkit-transform:none;height:100%;margin:0;overflow:visible;position:absolute;top:-10000px;left:0;width:100%}.fb_dialog.fb_dialog_mobile.loading{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/ya/r/3rhSv5V8j3o.gif) white no-repeat 50% 50%;min-height:100%;min-width:100%;overflow:hidden;position:absolute;top:0;z-index:10001}.fb_dialog.fb_dialog_mobile.loading.centered{max-height:590px;min-height:590px;max-width:500px;min-width:500px}#fb-root #fb_dialog_ipad_overlay{background:rgba(0, 0, 0, .45);position:absolute;left:0;top:0;width:100%;min-height:100%;z-index:10000}#fb-root #fb_dialog_ipad_overlay.hidden{display:none}.fb_dialog.fb_dialog_mobile.loading iframe{visibility:hidden}.fb_dialog_content .dialog_header{-webkit-box-shadow:white 0 1px 1px -1px inset;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#738ABA), to(#2C4987));border-bottom:1px solid;border-color:#1d4088;color:#fff;font:14px Helvetica, sans-serif;font-weight:bold;text-overflow:ellipsis;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0;vertical-align:middle;white-space:nowrap}.fb_dialog_content .dialog_header table{-webkit-font-smoothing:subpixel-antialiased;height:43px;width:100%}.fb_dialog_content .dialog_header td.header_left{font-size:12px;padding-left:5px;vertical-align:middle;width:60px}.fb_dialog_content .dialog_header td.header_right{font-size:12px;padding-right:5px;vertical-align:middle;width:60px}.fb_dialog_content .touchable_button{background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4966A6), color-stop(.5, #355492), to(#2A4887));border:1px solid #29447e;-webkit-background-clip:padding-box;-webkit-border-radius:3px;-webkit-box-shadow:rgba(0, 0, 0, .117188) 0 1px 1px inset, rgba(255, 255, 255, .167969) 0 1px 0;display:inline-block;margin-top:3px;max-width:85px;line-height:18px;padding:4px 12px;position:relative}.fb_dialog_content .dialog_header .touchable_button input{border:none;background:none;color:#fff;font:12px Helvetica, sans-serif;font-weight:bold;margin:2px -12px;padding:2px 6px 3px 6px;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}.fb_dialog_content .dialog_header .header_center{color:#fff;font-size:16px;font-weight:bold;line-height:18px;text-align:center;vertical-align:middle}.fb_dialog_content .dialog_content{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif) no-repeat 50% 50%;border:1px solid #555;border-bottom:0;border-top:0;height:150px}.fb_dialog_content .dialog_footer{background:#f2f2f2;border:1px solid #555;border-top-color:#ccc;height:40px}#fb_dialog_loader_close{float:left}.fb_dialog.fb_dialog_mobile .fb_dialog_close_button{text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}.fb_dialog.fb_dialog_mobile .fb_dialog_close_icon{visibility:hidden}
.fb_iframe_widget{display:inline-block;position:relative}.fb_iframe_widget span{display:inline-block;position:relative;text-align:justify}.fb_iframe_widget iframe{position:absolute}.fb_iframe_widget_lift{z-index:1}.fb_hide_iframes iframe{position:relative;left:-10000px}.fb_iframe_widget_loader{position:relative;display:inline-block}.fb_iframe_widget_fluid{display:inline}.fb_iframe_widget_fluid span{width:100%}.fb_iframe_widget_loader iframe{min-height:32px;z-index:2;zoom:1}.fb_iframe_widget_loader .FB_Loader{background:url(http://static.ak.fbcdn.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif) no-repeat;height:32px;width:32px;margin-left:-16px;position:absolute;left:50%;z-index:4}
.fbpluginrecommendationsbarleft,.fbpluginrecommendationsbarright{position:fixed !important;bottom:0;z-index:999}.fbpluginrecommendationsbarleft{left:10px}.fbpluginrecommendationsbarright{right:10px}</style></head>
<body>
<div id="dialog-notifications-success" title="Notification" style="display:none; width:600px;">
</div>
<div id="dialog-notifications-error" title="Error" style="display:none;">
</div>
<div id="bar-notification" class="bar-notification">
<img src="/Content/Images/ico-close-notification-bar.png" class="close" alt="Close" title="Close">
</div>
<div class="headerwrapper">
<div class="header ">
<div class="container top-header-container shadowwrapper">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="header-logo">
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<link href="/themes/ProcoDefault/Content/flyout/flyout.css" rel="stylesheet" type="text/css">
<script src="/themes/ProcoDefault/Content/flyout/flyout.js" type="text/javascript"></script>
<div class="social_container_login">
<div class="social_container">
<div><a target="_blank" href="http://www.facebook.com/pages/Brookhaven-Marketplace/33148540039"><img src="/Content/Images/uploaded/social/big_facebook_icon.png" alt="Facebook"></a></div>
<div><a target="_blank" href="https://twitter.com/#!/brookhavenmkt"><img src="/Content/Images/uploaded/social/Twitter.png" alt="Twitter"></a></div>
<div><a target="_blank" href="http://pinterest.com/brookhavenmkrt/"><img src="/Content/Images/uploaded/social/icon_pinterest.png" alt="Pinterest"></a></div>
</div>
<div class="login">
My Account
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<a class="see-u-picks" href="../../../specialcouponoffer"><img class="img-responsive" src="/content/images/uploaded/See-current-upick-offer-btn.png"></a>
</div>
<div id="login-box" class="login-popup">
<img src="/Content/Images/uploaded/close_pop.png" class="btn_close" title="Close Window" alt="Close">
<div class="header-links">
<h1>My Account</h1>
<ul>
<li>Shopping List</li>
<li>Preferences</li>
<li>Log out</li>
<li id="topcartlink">Shopping cart
(16)
</li>
<script type="text/javascript">
$('#topcartlink').live('mouseenter', function () {
$('#flyout-cart').addClass('active');
});
$('#topcartlink').live('mouseleave', function () {
$('#flyout-cart').removeClass('active');
});
$('#flyout-cart').live('mouseenter', function () {
$('#flyout-cart').addClass('active');
});
$('#flyout-cart').live('mouseleave', function () {
$('#flyout-cart').removeClass('active');
});
</script>
<li>Wishlist <a href="/wishlist" class="wishlist-qty">
(1)</a> </li>
</ul>
</div>
<div class="topdownclickme">
<div class="ico-myaccount">My Account</div></div>
<script>$('.topdownclickme').click(function() {
$('.header-links').slideToggle('slow', function() {
// Animation complete.
});
});
</script>
</div>
</div>
</div>
<div class="header-selectors-wrapper">
<div class="header-taxdisplaytypeselector">
</div>
<div class="header-currencyselector">
</div>
<div class="header-languageselector">
</div>
</div>
</div>
<div class="top-header-menu">
<link media="print" rel="stylesheet" type="text/css" href="/themes/ProcoDefault/Content/print.css">
<link rel="stylesheet" type="text/css" href="/themes/ProcoDefault/Content/nav/superfish.css" media="screen">
<script type="text/javascript" src="/Scripts/hoverIntent.js"></script>
<script type="text/javascript" src="/Scripts/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
<div class="container shadowwrapper ">
<div class="row">
<div class="col-lg-12 col-md-12 ">
<div class="headermenu">
<nav role="navigation" class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button data-target="#top-header-menu-proco" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="top-header-menu-proco" class="navbar-collapse collapse" style="height: 1px;">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>
<a href="/books">Books
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Computers
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/desktops">Desktops
</a>
</li>
<li>
<a href="/notebooks">Notebooks
</a>
</li>
<li>
<a href="/accessories">Accessories
</a>
</li>
<li>
<a href="/software-games">Software & Games
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Electronics
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="/camera-photo">Camera, photo
</a>
</li>
<li>
<a href="/cell-phones">Cell phones
</a>
</li>
</ul>
</li>
<li>
<a href="/apparel-shoes">Apparel & Shoes
</a>
</li>
<li>
<a href="/digital-downloads">Digital downloads
</a>
</li>
<li>
<a href="/jewelry">Jewelry
</a>
</li>
<li>
<a href="/gift-cards">Gift Cards
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /.container-fluid -->
</div>
</div>
</div>
</div>
</div>
<div class="background-wrapper">
<div class="#*master-wrapper-page*#">
<div class="#*master-wrapper-content*#">
<script type="text/javascript">
//<![CDATA[
//replace the first parameter with "true" to use popup notifications
AjaxCart.init(true, '.header-links .cart-qty', '.header-links .wishlist-qty', '#flyout-cart');
//]]>
</script>
<div class="ajax-loading-block-window" style="display: none">
<div class="loading-image">
</div>
</div>
<div class="white-background container shadowwrapper">
<div class="">
<div class="row">
<div class="col-md-3 ">
<div class="htmlcontent">
<div class="htmlcontent-body">
<div class="left-nav">
<ul>
<li><img src="/Content/Images/uploaded/HomePageLeft/glutenfree_promo.png" alt="" width="280" height="184"></li>
<li><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomePageLeft/winegeek.jpg" alt="" width="265" height="185"></li>
<!-- <li><img width="280" height="184" src="/Content/Images/uploaded/HomePageLeft/glutenfree_promo.png" /></li> -->
<li><img src="/Content/Images/uploaded/HomePageLeft/lifetime_fitness_button.jpg" alt="" width="232" height="185"></li>
<!--<li><img src="/Content/Images/uploaded/HomePageLeft/catering_promo.jpg" height="184" width="338" /></li>--></ul>
</div>
</div>
</div>
<div class="clear">test
</div>
</div>
<div class="col-md-9 ">
<div class="">
<link rel="stylesheet" href="/themes/ProcoDefault/Content/flexslider/flexslider.css" type="text/css">
<script src="/Scripts/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
slideshowSpeed: 5000
});
});
</script>
<div class="homepage_container">
<div id="fb-root" class=" fb_reset"><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div><iframe name="fb_xdm_frame_http" frameborder="0" allowtransparency="true" scrolling="no" id="fb_xdm_frame_http" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="http://static.ak.facebook.com/connect/xd_arbiter/KFZn1BJ0LYk.js?version=41#channel=f2cbd788b4&origin=http%3A%2F%2Flocalhost%3A38451" style="border: none;"></iframe><iframe name="fb_xdm_frame_https" frameborder="0" allowtransparency="true" scrolling="no" id="fb_xdm_frame_https" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="https://s-static.ak.facebook.com/connect/xd_arbiter/KFZn1BJ0LYk.js?version=41#channel=f2cbd788b4&origin=http%3A%2F%2Flocalhost%3A38451" style="border: none;"></iframe></div></div><div style="position: absolute; top: -10000px; height: 0px; width: 0px;"><div></div></div></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="homepagebanners"> <div class="htmlcontent">
<div class="htmlcontent-body">
<div class="flexslider">
<ul class="slides">
<li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item; opacity: 0.347983469537255;"><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomeBanners/Easter-Menu-banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/4-16-2014-1.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/4-16-2014-2.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="http://www.brookhavenmarket.com/Content/Images/uploaded/HomeBanners/2013_catering_banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: none;" class=""><img src="http://brookhavenmarket.com/Content/Images/uploaded/HomeBanners/gluten-free-banner.jpg" alt="" width="634" height="216"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item; opacity: 0.652016530462745;" class=""><img src="../../../Content/Images/uploaded/HomeBanners/help_wanted.jpg" alt="" width="634" height="216"></li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a class="">2</a></li><li><a class="">3</a></li><li><a class="">4</a></li><li><a class="">5</a></li><li><a class="">6</a></li></ol><ul class="flex-direction-nav"><li><a class="flex-prev" href="#">Previous</a></li><li><a class="flex-next" href="#">Next</a></li></ul></div>
</div>
</div>
</div>
<div class="homepagebottom"> <div class="htmlcontent">
<div class="htmlcontent-body">
<div class="homepageBlogContainer">
<p class="homepageBlogText"><span style="font-size: medium;"><strong><em>Easter Traditions with a Twist</em></strong></span></p>
<p>Easter is always a busy time at a food store ranking up there with the likes of Christmas and Thanksgiving as traditionally it’s a time when families gather together to share a meal. Not just any meal but what most would consider a feast. It’s a time when traditional foods that we have loved since childhood are planned, shopped for and prepared with great care and attention to detail. It’s a time when on most cases paper plates and plastic flatware are foregone in deference to Mom’s best china, crystal and silverware. Last week’s blog focused on our sweet tooth with suggested Easter Desserts. This week let’s concentrate on the main course....</p>
<p><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span lang="en-US">Okay, perhaps not. But we can still hope, can’t we?</span></span></span></p>
<p><span style="color: #800000;"><strong><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span lang="en-US"> ...</span></span></span><a style="font-size: small; font-family: Arial, sans-serif;" href="http://www.brookhavenmarket.com/blog"><span style="color: #800000;">read more</span></a></strong></span></p>
<div class="readmore"><img src="/Content/Images/uploaded/arrow.png" alt="" align="right"></div>
</div>
<div style="float: left;"><iframe style="width: 338px; height: 346px; overflow: hidden;" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBrookhaven-Marketplace%2F33148540039&width=340&colorscheme=light&show_faces=false&stream=true&header=true&height=346" width="320" height="240" frameborder="0" scrolling="no"></iframe></div>
</div>
</div>
</div>
<div class="clear">
</div>
<div class="clear">
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-wrapper">
<div class="container shadowwrapper">
<div class="row">
<div class="col-md-12">
<div class="footer ">
<div class="clear" style="height:1px"></div>
<img class="proco-logo" src="../themes/ProcoDefault/Content/images/proco_logo.png">
</div>
</div>
</div>
</div>
</div>
<div class="footer-disclaimer">
Copyright © 2014 Brookhaven Market. All rights reserved.
</div>
<div class="footer-storetheme">
</div>
</body></html>
I am using jquery-1.10.2.min.js. What could be the problem? There is showing no problem in console too. I already used navbar in many sites but never saw that kind of problem before. Please Help.
Bootstrap relies on jQuery but in your code you have presented the files for Bootstrap first. Change the order and it will work. Additionally you need to ensure your paths are correct as you seem to be missing the name of the theme.
As you mention in the comments, your code to include the scripts is:
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Themes/Content/bootstrap-3.2.0/js/bootstrap.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
Simply change the order of the last 2 lines like this:
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
Html.AppendScriptParts("~/Themes/ProcoDefault/Content/bootstrap-3.2.0/js/bootstrap.min.js");
I am trying to get the placeholder id of my drag/drop elements.
on first drag&drop i could retrieve it, however the content comes from database and mostly will be pre-populated.
The problem i am facing now is, i cannot find the id of the binded drop container.
$('document').ready(init);
function init() {
$('[data-type]').bind('dragstart', function (event) {
event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));
});
// bind the dragover event on the board sections
$('#header-container, #header-storage').bind('dragover', function (event) {
event.preventDefault();
//$(event.target).css({"background-color":"#AA0000"});
});
// bind the drop event on the board sections
$('#header-container, #header-storage').bind('drop', function (event) {
event.preventDefault();
var notecard = event.originalEvent.dataTransfer.getData("text/plain");
event.target.appendChild(document.getElementById(notecard));
var room = document.getElementById(event.target.id).parentNode;
console.log(room);
// Turn off the default behaviour
// without this, FF will try and go to a URL with your id's name
var $id = $(event.target).attr("data-element-id");
alert('you dropped ' + notecard + ' into '+$id+' but into what container i do not know? In header-container or storage container?');
});
}
/* Customize container */
#media (min-width: 768px) {
.container {
padding-top: 20px;
}
}
.popover {
min-width:300px;
height:auto;
}
[data-type="column"] {
padding: 10px;
min-height: 30px;
background-color: rgba(86, 61, 124, 0.15);
border: 1px solid rgba(86, 61, 124, 0.2);
}
.row-hightlight {
padding: 15px;
background-color: #C9C9C9;
border: 1px solid #FFFF33;
margin: 4px 0px;
}
[data-type="div"] {
padding: 15px;
background-color: rgba(194, 200, 230, 1);
border: 1px solid #000;
margin: 4px 0px;
max-width: 1022px;
}
.container-fluid {
padding: 30px;
background-color: #a4a4a4;
border: 1px solid red;
margin: 10px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<!-- row start -->
<div class="row">
<!-- col starts -->
<div class="col-md-3">
<!-- panel starts -->
<div id="storage" class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Storage Container</h3>
</div>
<div id="header-storage" class="panel-body">
<!-- div Starts -->
<div class="clickMe " data-element-id="59" data-type="container" id="59" draggable="true">container</div>
</div>
</div>
<!-- panel ends -->
</div>
<!-- col ends -->
<!-- board starts -->
<div id="header-container">
<div class="col-md-9">
<!-- div Starts -->
<div class="clickMe " data-element-id="43" data-type="div" id="43" draggable="true">
<!-- Container Starts -->
<div class="clickMe container-fluid" data-element-id="57" data-type="container" id="57" draggable="true">
<!-- div Starts -->
<div class="clickMe " data-element-id="52" data-type="div" id="52" draggable="true">
<!-- row Starts -->
<div class="row row-hightlight show-grid clickMe" data-element-id="60" data-type="row" id="60" draggable="true"></div>
<!-- row Ends -->
</div>
<!-- div Ends -->
</div>
<!-- container Ends -->
<!-- Container Starts -->
<div class="clickMe container-fluid" data-element-id="54" data-type="container" id="54" draggable="true">
<!-- div Starts -->
<div class="clickMe " data-element-id="55" data-type="div" id="55" draggable="true">
<!-- row Starts -->
<div class="row row-hightlight show-grid clickMe" data-element-id="56" data-type="row" id="56" draggable="true"></div>
<!-- row Ends -->
</div>
<!-- div Ends -->
</div>
<!-- container Ends -->
<!-- Container Starts -->
<div class="clickMe container-fluid" data-element-id="44" data-type="container" id="44" draggable="true">
<!-- row Starts -->
<div class="row row-hightlight show-grid clickMe" data-element-id="45" data-type="row" id="45" draggable="true">
<!-- column Starts -->
<div class="clickMe col-xs-6 col-sm-6 col-md-6 col-lg-6" data-element-id="51" data-type="column" id="51" draggable="true"></div>
<!-- column Ends -->
<!-- column Starts -->
<div class="clickMe col-xs-6 col-sm-6 col-md-6 col-lg-6" data-element-id="49" data-type="column" id="49" draggable="true">
<!-- row Starts -->
<div class="row row-hightlight show-grid clickMe" data-element-id="50" data-type="row" id="50" draggable="true">
<!-- column Starts -->
<div class="clickMe col-xs-12 col-sm-4 col-md-4 col-lg-4" data-element-id="47" data-type="column" id="47" draggable="true"></div>
<!-- column Ends -->
<!-- column Starts -->
<div class="clickMe col-xs-12 col-sm-4 col-md-4 col-lg-4" data-element-id="48" data-type="column" id="48" draggable="true">
<!-- div Starts -->
<div class="clickMe " data-element-id="53" data-type="div" id="53" draggable="true"></div>
<!-- div Ends -->
</div>
<!-- column Ends -->
<!-- column Starts -->
<div class="clickMe col-xs-12 col-sm-4 col-md-4 col-lg-4" data-element-id="46" data-type="column" id="46" draggable="true"></div>
<!-- column Ends -->
</div>
<!-- row Ends -->
</div>
<!-- column Ends -->
</div>
<!-- row Ends -->
</div>
<!-- container Ends -->
</div>
<!-- div Ends -->
</div>
</div>
<!-- board ends -->
</div>
<!-- row ends -->
</div>
After var $id = $(event.target).attr("data-element-id"); add:
alert( $(event.target).closest('#header-container, #header-storage').attr('id'));
I want to extract CustomerRatings out of this which is in "img class=BVImgOrSprite" using BeautifulSoup but not able to get it.
I read somewhere that BS only parse HTML content not the JS part. How should i proceed with it.
For traversing quickly look for ModuleId 372309 which i want to scrape. Thanks!!
<!DOCTYPE html>
<html lang="en-US" "="">
<head></head>
<body id="WalmartBodyId" class="WalmartMainBody DynamicMode wmItemPage" onload="handleLocationHash();" style="">
<iframe style="visibility:hidden;width:1px;height:1px;position:absolute;left:-999px;top:-999px;" src="http://walmart.ugc.bazaarvoice.com/1336/crossdomain.htm?format=embedded#origin=http%3A%2F%2Fwww.walmart.com"></iframe>
<script type="text/javascript"></script>
<script type="text/javascript" language="JavaScript"></script>
<div class="PageContainer">
<img class="WalmartLogo scrHid" width="145" height="62" border="0" style="float:none;margin-bottom:1px" src="http://i2.walmartimages.com/i/catalog/modules/G0040/wmlogo.gif"></img>
<div class="prtHid"></div>
<!--
end header
-->
<div class="MidContainer">
<div class="ItemPage clearfix" role="main">
<!--
ModuleId 372264
FileName #itemPageSingleRowContai…
-->
<!--
Start multiRowsContainer
-->
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix" itemtype="http://schema.org/Product" itemscope="">
<!--
ModuleId 372268
FileName #mainInfoTwoColsContaine…
-->
<!--
Start: mainInfoTwoColsContainer
-->
<script type="text/javascript"></script>
<div class="columnOne"></div>
<div class="columnTwo">
<!--
Main Additional Information
-->
<!--
Start mainInfoTwoColsContainer
-->
<!--
This DIV is used as the parent container of fly-o…
-->
<div id="Zoomer-big"></div>
<div>
<!--
ModuleId 372278
FileName #multiContainers
-->
<!--
Start multiRowsContainer MP
-->
<div class="multiRow">
<!--
ModuleId 372279
FileName #swMultiRowsContainer
-->
<form onsubmit="return ItemPage.validateSubmit(this, true);" action="/catalog/select_product.do" method="GET" name="SelectProductForm">
<input type="hidden" value="34083867" name="product_id"></input>
<input type="hidden" value="0" name="seller_id"></input>
<!--
Start multiRowsContainer MP
-->
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix">
<!--
ModuleId 372283
FileName #swSingleRowContainer1
-->
<!--
Start singleRowsContainer MP
-->
<style type="text/css"></style>
<!--
ModuleId 372309
FileName #CustomerRatingsLeftTop
-->
<script type="text/javascript"></script>
<div class="CustomerRatings">
<div id="BVCustomerRatings" class="BVBrowserFF">
<div class="BVRRRootElement">
<div class="BVRRRatingSummary BVRRPrimaryRatingSummary">
<div class="BVRRRatingSummaryStyle2">
<div class="BVRRRatingSummaryHeader"></div>
<div class="BVRROverallRatingContainer">
<div class="BVRRRatingContainerStar">
<div class="BVRRRatingEntry BVRROdd">
<div id="BVRRRatingOverall_" class="BVRRRating BVRRRatingNormal BVRRRatingOverall">
<div class="BVRRLabel BVRRRatingNormalLabel"></div>
<div class="BVRRRatingNormalImage">
<img class="BVImgOrSprite" width="75" height="15" title="3.4 out of 5" alt="3.4 out of 5" src="http://walmart.ugc.bazaarvoice.com/1336/3_4/5/rating.png"></img>
</div>
<div class="BVRRRatingNormalOutOf"></div>
</div>
</div>
</div>
</div>
<div id="BVRRRatingsHistogramButton_pyl3wq4v0hkzvqlgmib3ufvcl_ID" class="BVRRRatingsHistogramButton"></div>
<span class="BVRRCustomRatingSummaryCountContainer"></span>
<div class="BVRRSecondaryRatingsContainer"></div>
<div class="BVRRBuyAgainContainer"></div>
<div class="BVRRSecondaryRatingsContainer"></div>
<div class="BVRRRatingSummaryLinks"></div>
</div>
</div>
<a id="BVSubmissionLink" href="javascript://" data-bvjsref="http://walmart.ugc.bazaarvoice.com/1336/34083867/writereview…url=http%3A%2F%2Fwww.walmart.com%2Fcservice%2FwriteReview.do" data-bvcfg="574213729" style="display: none;"></a>
</div>
</div>
</div>
<!--
End: Customer Ratings Left Top
-->
<!--
ModuleId 372312
FileName #mpProductDetailsSummary…
-->
<div class="prtHid"></div>
<!--
ModuleId 372313
FileName #mpSecondaryButtons3
-->
<div class="prtHid"></div>
<!--
End singleRowsContainer
-->
</div>
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix"></div>
<div class="multiRow clearfix"></div>
</form>
<!--
End multiRowsContainer
-->
</div>
<div class="multiRow"></div>
<!--
End multiRowsContainer
-->
</div>
<!--
End mainInfoTwoColsContainer
-->
</div>
<!--
End: mainInfoTwoColsContainer
-->
</div>
<!--
End multiRowsContainer
-->
</div>
<div id="BottomAds" class="BottomAds" style="position: relative;left:200px"></div>
<!--
Start: R13.5 OSO - Sticky add to cart panel
-->
<div class="executeJS" style="display: hidden;"></div>
<!--
End: R13.5 OSO - Sticky add to cart panel
-->
<div id="emailMeOverlay" class="wm-widget-overlay-template" style="overflow: hidden" title="Notify me when it's back in stock"></div>
</div>
<script language="javascript"></script>
<div id="ROLLOVER" zindex="100000" style="display:none; text-align:left;" _pointermargin="-9px 0px 0px 10px" bubblemargin="5px 0 0 0" applyto="#ROLLOVER" pointer="true" bubbleposition="top" closebubbleonevent="mouseout" openbubbleonevent="mouseover" bubbleclassname="wm-widget-bubble-blue1px"></div>
<script type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="http://i2.walmartimages.com/css/quicklook_btn.css"></link>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<script type="text/javascript" src="http://www.walmart.com/c/midas/loader.js"></script>
<script type="text/javascript" src="//www.walmart.com/c/midas/hl.js"></script>
<style type="text/css"></style>
<script type="text/javascript" src="http://www.google.com/adsense/search/ads.js"></script>
<script type="text/javascript" src="//www.google.com/ads/search/module/ads/3.0/beb93033d95ef74abd29c04a5d16f4dbee1ccd0a/n/search.js"></script>
<script type="text/javascript" src="//www.walmart.com/c/midas/m_ip.js"></script>
<style type="text/css"></style>
<div id="ipAdsenseContainer"></div>
<script type="text/javascript"></script>
<!--
start footer
-->
<div class="prtHid"></div>
</div>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 0px; position: absolute; display: none;"></div>
<div class="prtHid"></div>
<!--
Start Pinterest call
-->
<script type="text/javascript"></script>
<!--
End Pinterest call
-->
<!--
-->
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<script src="/__ssobj/static/ss-walmart.min.31246.js"></script>
<script></script>
<script></script>
<script></script>
<!--
MERGED
-->
<script id="ss-descriptors" type="text/javascript"></script>
<!--
SSSV
-->
<script></script>
<script></script>
<script></script>
<script></script>
<ul class="ui-autocomplete ui-menu ui-widget ui-corner-all ui-widget-autocomplete" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 12; top: 0px; left: 0px; display: none;"></ul>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 5px 0px 0px; position: absolute; display: none;"></div>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 5px 0px 0px; position: absolute; display: none;"></div>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 5px 0px 0px; position: absolute; display: none;"></div>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 0px; position: absolute; display: none;"></div>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 0px; position: absolute; display: none;"></div>
<div class="wm-widget-bubble-blue1px wm-widget-bubble-pt-show-bottom" style="margin: 5px 0px 0px; position: absolute; display: none;"></div>
<div id="stickyAddtoCart"></div>
<img src="http://beacon.walmart.com:80/p13n/site/irs/beacon.gif?visito…ince_response=5831&time_since_init=0×tamp=1397377059098" style="position: absolute; width: 0px; height: 0px; top: -1234px; left: -1234px;"></img>
<img src="http://beacon.walmart.com:80/p13n/site/irs/beacon.gif?visito…ce_init=219&time_since_response=6050×tamp=1397377059317" style="position: absolute; width: 0px; height: 0px; top: -1234px; left: -1234px;"></img>
<img src="http://beacon.walmart.com:80/p13n/site/irs/beacon.gif?visito…ce_init=333&time_since_response=6164×tamp=1397377059431" style="position: absolute; width: 0px; height: 0px; top: -1234px; left: -1234px;"></img>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all" style="display: none; z-index: 50300; outline: 0px none;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-rmvideoPanel"></div>
<iframe id="google_osd_static_frame_9801270172171" name="google_osd_static_frame" style="display: none; width: 0px; height: 0px;"></iframe>
</body>
</html>
<!--
end footer
-->
You should probably check out Webkit or Spynner (got those from this SO question)- I've had a positive experience with PhantomJS for scraping content generated by JS in the past but it's not quite Python.