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'));
Related
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/
I doing my project using Laravel 5. I take some integer value form database and create square(DIVS) in Html.This is my current out put.
You can see , space between div vertically, but horizontally they are touching each others.I want to crate same space around the squares.
This is my current div create code.
<section class="content">
<div class="box box-warning" align="center">
<div class="gap">
<div class="box-body" id="panel">
#foreach($rooms as $room)
#if($room->roomState === 'Available')
<div onclick="divClick('Available','{{ $room }}' );" id='divelementone' style="width:150px;height:150px;border:1px solid #000;display:inline-block;background-color:#00a65a;border-radius: 5px;padding-left:10px;padding-right:10px;cursor:pointer;">{{$room->room_code}}<br/> {{$room->roomState}}</div>
#elseif ($room->roomState === 'UnAvailable')
<div onclick="divClick('UnAvailable', '{{ $room }}');" id='divelementtwo' style="width:150px;height:150px;border:1px solid #000;display:inline-block;background-color:#ed5565;border-radius: 5px;padding-left:10px;padding-right:10px;cursor:pointer;">{{$room->room_code}}<br/> {{$room->roomState}}</div>
#elseif ($room->roomState === 'notCheckIn')
<div onclick="divClick('notCheckIn', '{{ $room }}');" id='divelementthree' style="width:150px;height:150px;border:1px solid #000;display:inline-block;background-color:#FFC414;border-radius: 5px;padding-left:10px;padding-right:10px;cursor:pointer;">{{$room->room_code}}<br/> {{$room->roomState}}</div>
#endif
#endforeach
</div>
</div>
</div><!-- /.box -->
</section><!-- /.content -->
please , expect some expert help.
Inside your "gap" class insert a new line
margin-bottom:10px;
its looking some standard use extenal css if you are having many common attributes it will help in debugging
<style>
.square{
width:150px;
height:150px;
border:1px solid #000;
display:inline-block;
background-color:#00a65a;
border-radius: 5px;padding-left:10px;
padding-right:10px;
cursor:pointer;
margin-bottom:5px;//new added property to for bottom space
}
</style>
<section class="content">
<div class="box box-warning" align="center">
<div class="gap">
<div class="box-body" id="panel">
#foreach($rooms as $room)
#if($room->roomState === 'Available')
<div onclick="divClick('Available','{{ $room }}' );" id='divelementone' class="square" >{{$room->room_code}}<br/> {{$room->roomState}}</div>
#elseif ($room->roomState === 'UnAvailable')
<div onclick="divClick('UnAvailable', '{{ $room }}');" id='divelementtwo' class="square" style="background-color:#ed5565;">{{$room->room_code}}<br/> {{$room->roomState}}</div>
#elseif ($room->roomState === 'notCheckIn')
<div onclick="divClick('notCheckIn', '{{ $room }}');" id='divelementthree' class="square" style="background-color:#FFC414;">{{$room->room_code}}<br/> {{$room->roomState}}</div>
#endif
#endforeach
</div>
</div>
</div><!-- /.box -->
</section><!-- /.content -->
Edit your current padding and margin and use this in your gap class or inline:
padding:0 10px;
margin:2.5px; //This will give a total of 5px margin between each box. put 5 px to get a total of 10px margin.
I have an application, part of which is listing posts for a user profile:
<div class="row">
<%#posts.each do |x|%>
<div class="col-lg-4">
<%=x.body%>
</div>
<%end%>
<div class="row">
<div class="col-lg-12" style="border:1px solid black">
dsafasf
</div>
</div>
If i wasn't using dynamic data (lots of posts), this is what i want to happen ultimately (one row of posts shows up - then on click the large row underneath is toggled):
https://jsfiddle.net/nk2vLhhp/2/
However, I am trouble having this work with dynamic data. It is currently just showing one large row at the end of all posts (not just one row of posts). I want one large col-12 row after every three posts
How would i go about doing this? Any help please?
PS: My end, end goal is something like this: http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/
There are many ways to do it.
Method 1 :
$('.col-xs-4').click(function() {
$(".explanation").slideUp().remove();
var $desc = $("<div/>", {
class: 'explanation row'
}); //it can contain a close button like the others.
$desc.html($(this).find('.hidden').html());
$(this).closest('.row').after($desc).slideDown();
});
.col-xs-4 {
border: 1px solid black;
}
.col-xs-12 {
border: 1px solid black;
}
.hidden {
display: none;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
post 1
<div class='desc hidden'>Post 1 description</div>
</div>
<div class="col-xs-4">
post 2
<div class='desc hidden'>Post 2 description</div>
</div>
<div class="col-xs-4">
post 3
<div class='desc hidden'>Post 3 description</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
post 5
<div class='desc hidden'>Post 5 description</div>
</div>
<div class="col-xs-4">
post 6
<div class='desc hidden'>Post 6 description</div>
</div>
<div class="col-xs-4">
post 7
<div class='desc hidden'>Post 7 description</div>
</div>
</div>
Method 2 (with animation) :
Almost same as above but instead of creating the div.explanation everytime, simply define it hidden in the html, beneath every row.
https://jsfiddle.net/nk2vLhhp/13/
$('.col-xs-4').click(function(e) {
var $target = $(e.currentTarget);
$('.explanation').hide();
var targetClass = $target.attr('data-target');
$('.' + targetClass).removeClass('hidden').hide().slideDown();
});
.col-xs-4 {
border: 1px solid black;
}
.col-xs-12 {
border: 1px solid black;
}
.hidden {
display: none;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4" data-target='1-content'>
post 1
</div>
<div class="col-xs-4" data-target='2-content'>
post 2
</div>
<div class="col-xs-4" data-target='3-content'>
post 3
</div>
</div>
<div class='row'>
<div class='col-xs-12 explanation hidden 1-content'>Post 1 description</div>
<div class='col-xs-12 explanation hidden 2-content'>Post 2 description</div>
<div class='col-xs-12 explanation hidden 3-content'>Post 3 description</div>
<div>
<div class="row">
<div class="col-xs-4" data-target='4-content'>
post 4
</div>
<div class="col-xs-4" data-target='5-content'>
post 5
</div>
<div class="col-xs-4" data-target='6-content'>
post 6
</div>
</div>
<div class='row'>
<div class='col-xs-12 explanation hidden 4-content'>Post 4 description</div>
<div class='col-xs-12 explanation hidden 5-content'>Post 5 description</div>
<div class='col-xs-12 explanation hidden 6-content'>Post 6 description</div>
<div>
I need to center align every divs in Bootstrap3. To make it an accounting report. There're 3 level of divs - Header, subheader and detail list. Each level I use col-md-* to limit the width. I've tried text-align but it's not help.
Here's the code :
<div class="container">
<div class="header text-info">
<h1>Heading</h1><br />
<h2>Acc. Type</h2><br />
<h3>Month</h3>
</div>
<legend>Income</legend>
<div class="acc-content row">
<div class="col-md-12">
<b>col-md-12</b>
<span class="pull-right">###</span>
</div>
</div>
<legend>Expense</legend>
<div class="acc-content row">
<div class="col-md-12">
<b>col-md-12</b>
<span class="pull-right">###</span>
</div><!-- /col-md-12 -->
<div class="col-md-10">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
</div><!-- /acc-content -->
</div>
DEMO : http://fiddle.jshell.net/nobuts/mshwa1yt/1/show/ (please view in desktop).
I expect all the divs to center aligned like this : (red border is just a test)
Please be adviced.
Add col-md-offset-*. For example:
<div class="col-md-10 col-md-offset-1">
and
<div class="col-md-8 col-md-offset-2">
You must also change your margin: 5px on .acc-content div[class*='col-md-'] to margin-top: 5px; margin-bottom: 5px because it overwrites Bootstrap's margin-left for col-md-offset-*.
DEMO: http://jsfiddle.net/mshwa1yt/5/embedded/result/
DOCS: http://getbootstrap.com/css/#grid-offsetting
using block-center class wrapping using row
all the col classes from bootstrap have the float left property. either remove them (not adivsed) and add margin:auto to the divs...or add more divs:
if u have a col-8 add col-2 left and col-2 right (offsets)...so you keep the grid system in place
You need to add this to the divs:
.acc-content div[class*='col-md-'] {
float: none;
margin: 5px auto;
}
First one overwrites the float: left rule that's pretty much the opposite of center aligning it, the second one actually aligns it to center.
Bootstrap 3 has a mixin called center-block found in utilities.less.
First, add class center-block to elements that should be centered.
Then, if using Less, add to CSS:
.center-block {
.center-block();
}
If using plain CSS, add:
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
in this example replace this
<div class="col-md-10">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
with this
<div class="col-md-10 col-md-offset-1">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8 col-md-offset-2">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
add class col-md-offset-"number of cols" to col- divs
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.