I'm trying to build a regex php pattern for a multiline string, to remove the div that has the class of sn_published
I have tried (?s)<div class="sn_published".*?<\/div> it works but wont get the entire content within the div. It stops at the very first ending div.
Any idea? Thanks in advance.
<div class="sn_published">
<div id="snfwid4" class="sn_published_inner clearfix">
<script type="text/javascript">
/* <![CDATA[ */
if(!$.browser.msie||$.browser.version>7){if($.browser.msie&&$.browser.version<9){
document.write('<div class="fb"><iframe src="/9jagallery//www.facebook.com/plugins/like.php;jsessionid=4C9A788DF2A51CA6C494B8A4150A4605?href=http://www.9jagallery.ng/6999862?utm_source=facebook&utm_medium=social&utm_campaign=9jagallery_web&action=recommend&send=false&layout=button_count&width=168&show_faces=false&font&colorscheme=light&height=21&appId=964432556951162" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:168px;height:21px;" allowTransparency="true"></iframe></div>');
}else{
document.write('<div id="fwid5" class="fb"><fb:share-button type="button_count" href="http://www.9jagallery.ng/6999862?utm_source=facebook&utm_medium=social&utm_campaign=9jagallery_web"></fb:share-button></div>');
fbAsyncIds.push('fwid5');
fbStatUrls.push('https://www.blick.ch/stats/?rt=1&objId=6999862&type=article&ctxId=1912&pubId=2&cat=news&meta=like&title=See+the+male+celebrities+in+trad%2C+dapper+looks+on+the+red+carpet&url=http%3A%2F%2Fwww.9jagallery.ng%2Ffashion%2Famaa-2017-see-the-male-celebrities-in-trad-dapper-looks-on-the-red-carpet-id6999862.html');
}}
/* ]]> */
</script><div id="fwid5" class="fb"><fb:share-button type="button_count" href="http://www.9jagallery.ng/6999862?utm_source=facebook&utm_medium=social&utm_campaign=9jagallery_web" class=" fb_iframe_widget" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=&container_width=0&href=http%3A%2F%2Fwww.9jagallery.ng%2F6999862%3Futm_source%3Dfacebook%26utm_medium%3Dsocial%26utm_campaign%3D9jagallery_web&locale=en_US&sdk=joey&type=button_count"><span style="vertical-align: bottom; width: 69px; height: 20px;"><iframe name="fa3d670dae4582" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:share_button Facebook Social Plugin" src="https://www.facebook.com/plugins/share_button.php?app_id=&channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FXBwzv5Yrm_1.js%3Fversion%3D42%23cb%3Df3203d50df82472%26domain%3Dwww.9jagallery.ng%26origin%3Dhttp%253A%252F%252Fwww.9jagallery.ng%252Ff31a62e488eb1d4%26relation%3Dparent.parent&container_width=0&href=http%3A%2F%2Fwww.9jagallery.ng%2F6999862%3Futm_source%3Dfacebook%26utm_medium%3Dsocial%26utm_campaign%3D9jagallery_web&locale=en_US&sdk=joey&type=button_count" class="" style="border: none; visibility: visible; width: 69px; height: 20px;"></iframe></span></fb:share-button></div>
<div class="gp">
<div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px; background-position: initial initial; background-repeat: initial initial;"><iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" width="100%" id="I0_1500641915432" name="I0_1500641915432" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&size=medium&hl=en&origin=http%3A%2F%2Fwww.9jagallery.ng&url=http%3A%2F%2Fwww.9jagallery.ng%2F6999862&gsrc=3p&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.m8KuVzGTpkA.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNcaOvNVX1pvUOBoBGzpH6DVnAaSQ#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1500641915432&parent=http%3A%2F%2Fwww.9jagallery.ng&pfname=&rpctoken=76330505" data-gapiattached="true" title="G+"></iframe></div>
</div><div class="tw" style="margin-right:0px;">
<iframe id="twitter-widget-1" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" title="Twitter Tweet Button" src="http://platform.twitter.com/widgets/tweet_button.5f60791584f95f2ec483faec8b16a58b.en.html#dnt=false&id=twitter-widget-1&lang=en&original_referer=http%3A%2F%2Fwww.9jagallery.ng%2Ffashion%2Famaa-2017-see-the-male-celebrities-in-trad-dapper-looks-on-the-red-carpet-id6999862.html&size=m&text=AMAA%202017%3A%20See%20the%20male%20celebrities%20in%20trad%2C%20dapper%20looks%20on%20the%20red%20carpet%20%409jagalleryNigeria247&time=1500641916562&type=share&url=http%3A%2F%2Fwww.9jagallery.ng%2F6999862%3Futm_source%3Dtwitter%26utm_medium%3Dsocial%26utm_campaign%3D9jagallery_web" data-url="http://www.9jagallery.ng/6999862?utm_source=twitter&utm_medium=social&utm_campaign=9jagallery_web" style="position: static; visibility: visible; width: 61px; height: 20px;"></iframe>
</div>
</div>
</div>
<div foobar>jhuj </div>
You can't. You should use DomDocument for this situation. That makes your job a lot easier.
You can load the HTML in the Dom, loop through all Div with getElementsByTagName method and filter what you need.
Related
I'm trying to display play button over a thumbnail with CSS in my WordPress. I tried many methods but always is bad. Can you help me, where I am wrong?
.post-thumbnail-sidebar {
display: block;
text-align: center;
}
.post-thumbnail-sidebar embed,
.post-thumbnail-sidebar iframe,
.post-thumbnail-sidebar object {
margin-bottom: 30px;
}
.post-thumbnail-sidebar a {
position: absolute;
display: block;
background: url("https://i.imgur.com/FPwyRnP.png") no-repeat;
height: 85px;
width: 136px;
top: 100%;
left: 100%;
margin: -64px 0 0 -88px;
}
<a class="post-thumbnail-sidebar" href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( $r_post_thumb_size, array( 'itemprop' => 'image' ) ); ?>
</a>
Not enough but i think you can start with this.
here's a fiddle
.second-img {
position: absolute;
top: 0px;
margin-left: 20px
}
<div>
<img class="background-img" width="100%" height="100%" style="position:absolute; top:0; left:0;" src= "https://vincentloy.files.wordpress.com/2012/01/in-time-2011-r5-line-xvid-fusion_screenshot_4.jpg">
<img class="second-img" width="100%" height="100%" src = "http://sanyangfrp.com/data/out/805/511806414-play-button-png.png" />
</div>
JSFiddle here.
Why isn't my a.previous-slide-arrows' and a.next-slide-arrows' background-image visible at all?
I was working on a web page in which I had included this code for the slideshow through the PHP include statement. There, the vertical-align applied to a.previous-slide-arrow and a.next-slide-arrow does not seem to work at all.
I posted the same code here (changed the paths to images as the ones I was using there were on localhost, and changed some PHP for loops for writing the <img> tag which appears 6 times) - and strangely the vertical-align does work here, but the background-image applied to a.previous-slide-arrow and a.next-slide-arrow is not visible. Why?
.image-slideshow-container {} .image-slideshow-container img {
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
img.slider-image1 {
display: block;
}
.first-viewport {
height: 100%;
width: 100%;
position: absolute;
display: table;
}
a.previous-slide-arrow,
a.next-slide-arrow {
display: table-cell;
vertical-align: middle;
position: relative;
color: transparent;
opacity: 0.7;
text-align: center;
/* =s */
left: 20px;
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png");
background-repeat: no-repeat;
}
a.next-slide-arrow {
right: 20px;
left: auto;
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png");
}
.navigation-arrows-container a.previous-slide-arrow:hover,
.navigation-arrows-container a.next-slide-arrow:hover {
opacity: 1;
}
.navigation-bullets-container {
text-align: center;
margin-top: 20px;
margin-bottom: 60px;
display: table-cell;
vertical-align: bottom;
position: relative;
}
.navigation-bullets-container span {
display: none;
}
.navigation-bullets-container a {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 5px;
background: #4b4040;
}
.navigation-bullets-container a:hover {
background: black;
}
.navigation-bullets-container a.active {
background: black;
}
<div class="image-slideshow-container">
<img class="slider-image1" src="http://i992.photobucket.com/albums/af42/webtreatsetc/Textures%20Patterns%20Brushes%20from%20Webtreats/LightBlur.png" alt="pitcher!" />
<img class="slider-image2" src="http://m.rgbimg.com/cache1vNdB6/users/x/xy/xymonau/600/ooNRizq.jpg" alt="pitcher!" />
<img class="slider-image3" src="http://cdn.desktopwallpapers4.me/media/thumbs_400x250/3/23394.jpg" alt="pitcher!" />
<img class="slider-image4" src="http://papers.co/wallpaper/papers.co-sd19-sand-storm-gradient-blur-8-wallpaper.jpg" alt="pitcher!" />
<img class="slider-image5" src="http://m.rgbimg.com/cache1sw4YI/users/x/xy/xymonau/600/nxXqi9O.jpg" alt="pitcher!" />
<img class="slider-image6" src="http://previews.123rf.com/images/hospitalera/hospitalera0805/hospitalera080500016/3089997-Halftone-blue-pattern-with-little-dots-and-some-zoom-blur-applied--Stock-Photo.jpg" alt="pitcher!" />
</div>
<div class="first-viewport">
<a class="previous-slide-arrow" href="#"><</a>
<div class="navigation-bullets-container">
<a class="navigation-bullet1" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet2" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet3" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet4" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet5" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet6" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
</div>
<a class="next-slide-arrow" href="#">></a>
</div>
EDIT: #EternalHour
Please use background instead of background-image and also give the width and height of the image.
You can add this background-size: contain; to the previous and next arrow classes.
Just add "background-size: 100% 50%;"
a.previous-slide-arrow,
a.next-slide-arrow {
display: table-cell;
vertical-align: middle;
position: relative;
color: transparent;
opacity: 0.7;
text-align: center;
/* =s */
left: 20px;
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png");
background-repeat: no-repeat;
background-size: 100% 50%;
}
It's because you are using a background url, in these circumstances you need to specify a width and height for the container. In this case a, otherwise it will not be visible.
a.previous-slide-arrow, a.next-slide-arrow {
height: 128px;
width: 128px;
...
}
Aligning image at start and
I am using following code
<div id="ringName" style="background-color: #701344;height: 50px; border-radius: 4px; width: 800px; ">
<img style="margin-top:5; margin-left:20;" src="images/about_us_logo.png" alt="" width="40" height="40" />
<div style="font-size: 24px; color: #FFF; text-align: center; line-height: 50px; height: 50px; border-radius: 4px; width: 760px; " ><?php echo $store['name'] ?></div>
</div>
What i want to do is, make a Voilet bar of width 800px , height 50px.
The <img> tag will show logo at like margin left 5 and margin top 5. Means at start in center vertical at start of The bar.
However I want to show the store name in the middle of the MAIN DIV, CEnter horizontal, center vertical.
In above code, the Text is not showing, and the margins to the logo are not working either.
What are the fixes
Here's the debugged code: http://jsfiddle.net/u7G2M/.
HTML:
<div id="ringName">
<img style="" src="http://placehold.it/40x40" alt="" />
<div>Store Name</div>
</div>
CSS:
#ringName {
background-color: #701344;
height: 50px;
border-radius: 4px;
width: 800px;
}
#ringName > img {
margin-top:5px;
margin-left:20px;
width: 40px;
height: 40px;
}
#ringName > div {
display: inline-block;
font: 24px/50px Sans-Serif;
color: #fff;
text-align: center;
vertical-align: top;
width: 700px;
}
.className{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
In my web i allow user to post comment with there name and picture. I have notice one issue that when some one post bigger picture in comment using html code it run out of comment box. so all i want is thing should stay inside a comment box. not matter how big picture they post. i have posted all detail below kindly help thanks :|
My html
<div class="mycomment">
<div id="postpic">
<img id="profile_pic" width="50px" height="150px" src="image/user/1.gif" class="">
</div>
<div class="mycommentpost">
<a class="postername" href="profile.php?userID=1">Deepak Kumar: </a><br>
<img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt="">
</div>
</div>
My css:
.mycomment {
font-weight: normal;
color: #000000;
border: 2px solid #DEDEDE;
letter-spacing: 1pt;
font-family: arial, helvetica, sans-serif;
float: left;
width: 550px;
margin: 20px 0;
}
#postpic {
float: left;
width: 70px;
}
.mycommentpost {
font-weight: normal;
color: #000000;
letter-spacing: 1pt;
width: 480px;
float: right;
}
.postername {
color: #580000;
font-weight: bold;
font-size: 1em;
text-decoration: none;
}
Comment here is just a picture:
<img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt="">
Solved : By adding this ->
.mycommentpost > img{
max-height: XXXpx !important;
max-width: XXXpx !important;
}
Add to your CSS
.mycommentpost > img{
max-height: XXXpx !important;
max-width: XXXpx !important;
}
This way you will limit the max sizes of added images..
no matter what size of image they upload using this css set the image to default size in your mycommentpost div.
> .mycommentpost img{
> border: 1px solid #DEDEDE;
> padding: 10px;
> width: 130px; }
Try this
<div class="mycomment">
<div id="postpic">
<img id="profile_pic" width="50px" height="150px" src="image/user/1.gif" class="">
</div>
<div class="mycommentpost">
<a class="postername" href="profile.php?userID=1">Deepak Kumar: </a><br>
<img src="http://i00.i.aliimg.com/wsphoto/v0/789295022/-font-b-Easter-b-font-day-font-b-Bunny-b-font-ears.jpg" width="650" height="350" alt="">
</div>
.mycommentpost {
font-weight: normal;
color: #000000;
letter-spacing: 1pt;
width: 480px;
float: left;
}
.mycommentpost img{
width :450px;
}
I see alot of contradictory information on this online and I figured people here would know better than the vast majority of other places.
Is it possible to have an div with an iframe inside of it autosize the width (and possibly height) ->WITHOUT<- the use of javascript.. also it needs to be crossbrowser capable (browsers like lynx and ie5 are not a concern at all).
I have been tinkering and following various peoples suggestions online in regards to this for days but I still do not see my div and iframe limit their width to whatever data is loading in the iframe (just tables of random info).
Here is some of the css I have and the associated html, as you can tell it has since gone through some revisions that do not have width:auto; height:auto etc.
div#topleftdiv
{
float: left;
width: 25%;
height: auto;
}
iframe#topleftframe
{
background-color: transparent;
-moz-opacity: .00;
filter: alpha(opacity=00);
}
div#toprightdiv
{
float: right;
width: 25%;
height: auto;
}
iframe#toprightframe
{
background-color: transparent;
-moz-opacity: .00;
filter: alpha(opacity=00);
}
div#topmiddlediv
{
float: left;
width: 49%;
height: auto;
text-align: center;
align: center;
margin-left: auto;
margin-right: auto;
}
iframe#topmiddleframe
{
width: 100%;
height: 40em;
text-align: center;
align: center;
margin-left: auto;
margin-right: auto;
-moz-border-radius: 15px;
border-radius: 15px;
}
div#bottomdiv
{
clear: both;
}
<div id="topleftdiv" scrolling="no">
<iframe id="topleftframe" name="topleftframe" scrolling="no" allowtransparency="true" frameBorder="0">
</iframe>
</div>
<div id="toprightdiv" scrolling="no">
<iframe id="toprightframe" name="toprightframe" scrolling="no" allowtransparency="true" frameBorder="0">
</iframe>
</div>
<div id="topmiddlediv" scrolling="no">
<iframe id="topmiddleframe" name="topmiddleframe" scrolling="no" allowtransparency="true" frameborder="0" noresize>
</iframe>
</div>
No, it's not possible. You need JavaScript to communicate the frame size back to the parent window.
The basic JavaScript, should you change your mind:
from the iFrame:
parent.document.getElementById('iframe_id').style.height =
document.body.offsetHeight;