I have :
<div id="container" class="masonry js-masonry">
<div class="item">
<img width="128" alt="image.jpg" class="image" src="small/thumb_Jennifer_Aniston-wallpaper.jpg">
</div>
<div class="item">
<img width="128" alt="image.jpg" class="image" src="small/thumb_Jennifer_Aniston-wallpaper.jpg">
</div>
</div>
and:
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
var container = document.querySelector('#container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
</script>
Masonry work as axpected but images overlap.after I rezise the browser they show in the right way.
What is wrong? How shoud I do it?
Related
HTML
<script type="text/javascript" src="/static/opt/require.js" data-main="/static/opt/demo"></script>
<script type="text/javascript" src="/static/opt/demo.js"></script>
<script src="/static/opt/monaco-editor/package/min/vs/loader.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px">
<div class="col-md-4 col-sm-4 col-xs-4" style="padding: 0;display: inline-flex;margin-left: 175px">
<div id="input_editor" ></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="margin-left:165px;display: inline-flex">
<div id="show_editor" ></div>
</div>
</div>
demo.js
require.config({paths:{'vs':'/static/opt/monaco-editor/package/min/vs'}});
$(document).ready(function () {
require(['vs/editor/editor.main'], function(){
var input_editor = monaco.editor.create(document.getElementById("input_editor"), {
value: "aaa"
})
})
require(['vs/editor/editor.main'], function(){
var show_editor = monaco.editor.create(document.getElementById("show_editor"), {
value: "bbbbb"
})
})
})
Is there anything wrong in my code? How should I use monaco editor in HTML?
And is there any api to color somelines red or green in the Monaca Editor?
Thanks
Now I am trying to remove div class from BeautifulSoup result like this:
response = requests.get(url)
// success
cnbeta_article_content = BeautifulSoup(response.content, "html.parser").find("div", {"class": "cnbeta-article-body"})
// failed
removed_share_content = BeautifulSoup(cnbeta_article_content, "html.parse").find("div", {"class": "article-share-code"}).decompose()
result_text = removed_share_content.prettify()
return result_text
first get div from class cnbeta-article-body, the delete div article-share-code from filtered result, but it seems not work. what should I do to fix it? this url is: https://www.cnbeta.com/articles/tech/1097507.htm
The html of cnbeta-article-body div is as follows
<div class="cnbeta-article-body">
<div class="article-summary">
<div class="topic"><img src="https://static.cnbetacdn.com/topics/9a78aa447fb90ef.png" title="手机 - OnePlus ä¸€åŠ "/></div>
<p>ä¸€åŠ å³å°†å‘å¸ƒå¹´åº¦æ——èˆ°ä¸€åŠ 9系列，éšç€æ–°æ——舰的到æ¥ï¼Œä¸€åŠ 8ç³»åˆ—æœºåž‹ä»·æ ¼å¼€å§‹ä¸‹è°ƒã€‚ä»Šå¤©ï¼Œä¸€åŠ å®£å¸ƒï¼Œ<strong>ä¸€åŠ 8 Proæœ€é«˜ä¼˜æƒ 1000å
ƒï¼Œèµ·å”®ä»·åªè¦4599å
ƒï¼Œæ”¯æŒ24期å
æ¯åˆ†æœŸ</strong>，æä¾›é’空ã€é»‘é•œã€è“调三ç§é
色。</p> </div>
<div class="article-content" id="artibody">
<div class="article-global"><p><strong>访问：</strong></p><p><a href="https://click.aliyun.com/m/1000245338/" target="_blank"><strong><span style="color: rgb(192, 0, 0);">2021阿里云上云采è´å£ï¼šé‡‡è´è¡¥è´´ã€å
值返券ã€çˆ†æ¬¾æŠ¢å
ˆè´â€¦â€¦</span></strong></a></p></div> <div class="article-topic"><p>
<strong>访问è´ä¹°é¡µé¢:</strong>
</p>
<p>
ä¸€åŠ è‡ªè¥æ——舰店
</p></div><p style="text-align:center"><img src="https://static.cnbetacdn.com/article/2021/0304/8158fddd4c92c53.jpg"/></p><p style="text-align: left;">ä¸€åŠ 8 Pro最大的看点之一是å±å¹•ï¼Œ<strong>å
¶å±å¹•å°ºå¯¸ä¸º6.78英寸，分辨率为2K+，刷新率为120Hzï¼Œè§¦æŽ§é‡‡æ ·çŽ‡ä¸º240Hz，被称之为“å±å¹•æœºçš‡â€ã€‚</strong></p><p style="text-align: left;">DisplayMateè¯„ä»·ä¸€åŠ 8 Pro：<strong>教科书般完<a data-link="1" href="https://c.duomai.com/track.php?site_id=242986&euid=&t=https://mideajiadian.jd.com/" target="_blank">美的</a>æ ¡å‡†ç²¾åº¦å’Œæ€§èƒ½è¡¨çŽ°</strong>ï¼Œåˆ›é€ 13项智能<a data-link="1" href="https://c.duomai.com/track.php?site_id=242986&euid=&t=https://shouji.jd.com/" target="_blank">手机</a>显示记录。</p><p style="text-align: left;">è§„æ ¼æ–¹é¢ï¼Œä¸€åŠ 8 Proæ载高通éªé¾™865旗舰平å°ï¼Œå‰ç½®1600万åƒç´ ，åŽç½®4800万è¶
æ¸
å››æ‘„ï¼Œç”µæ± å®¹é‡ä¸º4510mAh，支æŒ30W Warpæ— çº¿é—ªå
ã€Warpé—ªå
30T有线å
电。</p><p style="text-align: left;">æ¤å¤–ï¼Œä¸€åŠ 8Tå
¨é¢çŽ°è´§å‘售，起售价3399å
ƒï¼Œä¸€åŠ 8é™è‡³3299å
ƒã€‚</p><p style="text-align: center;"><img src="https://static.cnbetacdn.com/thumb/article/2021/0304/cfdb4208167012e.jpg"/><img src="https://static.cnbetacdn.com/thumb/article/2021/0304/e7bb8bbd2e5b913.jpg"/><img src="https://static.cnbetacdn.com/thumb/article/2021/0304/2e6cad84f505f43.jpg"/><img src="https://static.cnbetacdn.com/thumb/article/2021/0304/b77d443a3761049.jpg"/><img src="https://static.cnbetacdn.com/thumb/article/2021/0304/ea9ebd51f33109f.jpg"/><img src="https://static.cnbetacdn.com/thumb/article/2021/0304/db97040429b984a.jpg"/><img src="https://static.cnbetacdn.com/thumb/article/2021/0304/6a9943e38585768.jpg"/><img src="https://static.cnbetacdn.com/thumb/article/2021/0304/06ceef5e21085e6.jpg"/><img src="https://static.cnbetacdn.com/thumb/article/2021/0304/c052adf0ce81f58.jpg"/><img src="https://static.cnbetacdn.com/thumb/article/2021/0304/5e3036dd27cbd45.jpg"/></p> </div>
<div class="tac">
<div class="tal cbv"><script type="text/javascript"><!--
google_ad_client = "ca-pub-3507708728694406";
/* cnBeta.COM æ–‡ç« é¡µæ–‡æœ«é€šæ #1 */
google_ad_slot = "1385693419";
google_ad_width = 810;
google_ad_height = 100;
//-->
</script>
<script src="//pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script></div>
<div class="tal cbv">
<img src="https://static.cnbetacdn.com/article/2021/03/7bcc0f26b07694b.jpg"/>
</div>
<div class="tal cbv">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-3507708728694406";
/* cnBeta.COM æ–‡ç« é¡µæ–‡æœ«é€šæ #2 */
google_ad_slot = "8489727379";
google_ad_width = 810;
google_ad_height = 100;
//-->
</script>
<script src="//pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
<div class="cbv810">
<div class="left500"><script type="text/javascript">
(function() {
var s = "_" + Math.random().toString(36).slice(2);
document.write('<div style="" id="' + s + '"></div>');
(window.slotbydup = window.slotbydup || []).push({
id: "u4395341",
container: s
});
})();
</script><script async="async" defer="defer" src="//cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript">
</script>
</div>
<div class="right300"><script type="text/javascript"><!--
google_ad_client = "ca-pub-3507708728694406";
/* cnBeta.COM V5 æ–‡ç« é¡µæ–‡æœ«ç”»ä¸ç”» #2 */
google_ad_slot = "5755245019";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script src="//pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script></div>
</div> </div>
<div class="article-share-code">
<div class="share-unit"><div class="share-btns bdsharebuttonbox"><a class="bds_tsina share-btn weibo" data-cmd="tsina" href="#" title="分享到新浪微åš">新浪微åš</a><a class="bds_qzone share-btn qzone" data-cmd="qzone" href="#" title="分享到QQ空间">QQ空间</a><a class="bds_tqq share-btn tqq" data-cmd="tqq" href="#" title="分享到è
¾è®¯å¾®åš">è
¾è®¯å¾®åš</a><a class="bds_sqq share-btn sqq" data-cmd="sqq" href="#" title="分享到QQ好å‹">QQ好å‹</a><a class="bds_weixin share-btn weixin" data-cmd="weixin" href="#" title="分享到微信">微信</a><a class="bds_douban share-btn douban" data-cmd="douban" href="#" title="分享到豆瓣网">豆瓣网</a><a class="bds_youdao share-btn youdao" data-cmd="youdao" href="#" title="分享到有é“云笔记">有é“云笔记</a><a class="bds_tieba share-btn tieba" data-cmd="tieba" href="#" title="分享到百度贴å§">百度贴å§</a><a class="bds_linkedin share-btn linkedin" data-cmd="linkedin" href="#" title="分享到linkedin">Linkedin</a><div class="more"></div></div></div>
<label><img src="//static.cnbetacdn.com/share/r2.gif"/></label>
</div>
<div class="article-global"></div> </div>
If you observe, div with class article-share-code is a child node. If you delete the parent, all the child nodes too get deleted.
Hence, if you run the following code, the child node also gets deleted
res = requests.get("https://www.cnbeta.com/articles/tech/1097507.htm")
soup = BeautifulSoup(res.text)
soup.find("div", {"class": "cnbeta-article-body"}).decompose()
Only to delete the div with class article-share-code check the following code
soup.find("div", {"class": "article-share-code"}).decompose()
I'm Learning ReactJS Components and here my code is... I'm not getting where to save this file or in which folder I should keep this file?
<body>
<div id="anmol"></div> <script
src="https://unpkg.com/react#15/dist/react.min.js"></script> <script
src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel"> var NavBar = React.createClass({
render: function() {
return (
<div className='navbar navbar-deafult'>
<div className='navbar-header'>
<a className='navbar-brand'>React</a>
</div>
<div className="collapse navbar-collapse">
<ul className="navbar-nav nav navbar-right">
<li> Home Page </li>
<li> About Us </li>
</ul>
</div>
</div>
); } }); var HelloWorld = React.createClass({
render:function() {
return(
<div> <h1>{this.props.children} </h1></div>
); } }); var destination = document.querySelector("anmol"); ReactDOM.render( <div> <NavBar/> <HelloWorld>
HelloWorld</HelloWorld</div>,destination); </script>
</body>
it look's like you are learning react, I strongly advice you to use https://github.com/facebook/create-react-app which will set-up whole environment with babel webpack and everything for you, so you can start to play with React. Greeting and have fun with React.
You can use codesandbox.io as well!
I created the example you were working on in there with updated syntax.
https://codesandbox.io/s/n9227v5xkp
I am creating a website using MVC5 (we do for all our websites here) and I am trying to integrate the FlexSlider (found here: https://woocommerce.com/flexslider/) into one of my pages.
I can't seem to get it working, the page just displays nothing, yet it appears in the 'Inspect Element' with each image as being 0x0 px.
HTML:
<div class="flexslider" data-controlnav="thumbnails">
<ul class="slides">
#if (Model.CDSContent != null)
{
foreach (var item in Model.CDSContent)
{
<li>
<a href="#">
<img src="#Html.Raw(item["newsimage"])" alt="Slide 2">
<div class="flex-caption">newstitle</div>
</a>
</li>
}
}
</ul>
</div>
I also have the JS and CSS linked:
<link rel="stylesheet" type="text/css" href="http://flexslider.woothemes.com/css/flexslider.css">
<link rel="stylesheet" type="text/css" href="http://lab.mattvarone.com/projects/jquery/totop/css/ui.totop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.easing.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.mousewheel.js"></script>
<script type='text/javascript' src="http://lab.mattvarone.com/projects/jquery/totop/js/jquery.ui.totop.js"></script>
Of course its a little bit difficult to say why your code is not working.
Have you checked what #Html.Raw(item["newsimage"]) returns ?
But...
You could use a carousel that runs on bootstrap.
The code below i made is to scan a folder for images and then i send them to the view with a viewbag.
--Controller code Start--
var GetSliderImaged = Directory.EnumerateFiles(Server.MapPath("~/Content/SlideShowIndexPage")).Select(fn => Path.GetFileName(fn));
ViewBag.Sliderimages = GetSliderImaged;
--Controller code End--
--View code Start--
<div id="myCarousel" class="carousel slide MTop10 BRadius10 unselectable" data-ride="carousel" data-interval="6000">
<ol class="carousel-indicators" style="margin-bottom: 0px;">
#{
var ii = 0;
foreach (var image in ViewBag.Sliderimages)
{
if (ii == 0)
{
<li data-target="#myCarousel" data-slide-to="#ii" class="active"></li>
}
else
{
<li data-target="#myCarousel" data-slide-to="#ii"></li>
}
ii++;
}
}
</ol>
<div class="carousel-inner " role="listbox">
#{
var i = 0;
foreach (var image in ViewBag.Sliderimages)
{
if (i == 0)
{
<div class="item active">
<img src="~/Content/SlideShowIndexPage/#image" alt="#image" title="#image" class="img-responsive AWIndexPageSlideImage" />
<div class="carousel-caption">
</div>
</div>
i++;
}
else
{
<div class="item">
<img src="~/Content/SlideShowIndexPage/#image" alt="#image" title="#image" class="img-responsive AWIndexPageSlideImage" />
<div class="carousel-caption">
</div>
</div>
}
}
}
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
--View code End--
Just so you know .. the code is not complete but its works for sure if there are images "It does not check if there are no images in the viewbag etc"
But for sure that will be easy to make it yourself.
I am novice in JQuery UI. I am trying code for opening jquery dialog with image and text from existing code in one of div tags. My code is
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".peter_pic").click(function(){
$( ".peter" ).dialog( "open" );
});
$( ".peter" ).dialog({ autoOpen: false });
});
$( window ).load(function() {
$(".peter").hide();
});
</script>
<div class="Table" style="display: table;" >
<div style="display: table-row;">
<div style="display: table-cell;" class = "test">
<img class = "peter_pic" src="someimage.jpg" />
<div data-role="popup" class="peter">
Display some text. Display some text. Display some text.
</div>
</div>
</div>
</div>
I figured out on my own about the solution.
I added multiple img tag. This solved the problem.
<div class="Table" style="display: table;" >
<div style="display: table-row;">
<div style="display: table-cell;" class = "test">
<img class = "peter_pic" src="someimage.jpg" />
<div data-role="popup" class="peter">
<img class = "peter_pic" src="someimage.jpg" />
Display some text. Display some text. Display some text.
</div>
</div>
</div>
</div>