blogspot.co.il is one of my blogger page.
I put in every page a video.
now before the user sees the video, I'd like them to see this image.
and only after the only when the user click on that image ,only then the video start playing.
This is the code for one of the pages:
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="ltr" style="text-align: center;">
<br /><br />
<div dir="rtl">
<span style="color: #8e5353; font-size: x-large;"><b>-9- Part</b></span>
</div>
<div dir="rtl">
<span style="color: #0000ee; font-size: x-large;"><b><u>Broken Family. Blessing in disguise</u></b></span>
</div>
<br /><br /><br />
<div>
<div dir="rtl">
</div>
<div dir="ltr">
<div class="video-container">
<iframe height="375" src="https://docs.google.com/file/d/0B0hozXLPGwkIa1dDTUpyUkpuQk0/preview" width="640"></iframe>
</div>
<b style="color: #0000ee; font-size: xx-large;"><u><br /></u></b>
</div>
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both; direction: ltr;">
</div>
<div class="separator" style="clear: both; text-align: right;">
</div>
<div style="text-align: right;">
<div style="direction: ltr; text-align: left;">
</div>
<div>
<br />
</div>
</div>
<div style="text-align: right;">
</div>
</div>
</div>
</div>
I appreciate your help.
Look trick in this blog
http://beben-koben.blogspot.com/2013/05/trick-for-embed-video-youtube-to-be.html
i hope that useful
Related
I'm making a feedback popup. I want to make sure that the text in the input can come to my email when users press the submit button. I tried it in the way below, but the text in the input doesn't come to me by e-mail.
<div class="popup" style="z-index: 10">
<div class="contentBox">
<!--close_btn=======-->
<button id="close">X</button>
<div class="feedbackBox" style="padding-top: 3px">
<strong>Give feedback</strong>
<p style="margin: 10.96px">
Таны үлдээсэн сэтгэгдэл бидэнд маш их тус болох болно.
</p>
</div>
<!--emojies========-->
<div class="emojiBox">
<div class="emoji" style="margin-left: 56.81px">
<img src="icons/face emoji/smiling-face-with-heart-eyes.png" alt="" />
<p>Best</p>
</div>
<div class="emoji">
<img src="icons/face emoji/happy-face-with-enlarged-eyes.png" alt="" />
<p>Good</p>
</div>
<div class="emoji">
<img src="icons/face emoji/expressionless-face.png" alt="" />
<p>Bad</p>
</div>
<div class="emoji">
<img src="icons/face emoji/face-with-steam-from-nose.png" alt="" />
<p>Terrible</p>
</div>
</div>
<!--feedback-write==-->
<div class="wrie_feedback">
<p>Үлдэхийг хүссэн санал бодол, сэтгэгдлээ доор үлдээнэ үү.</p>
<input type="text" maxlength="200" required />
</div>
<!--send-btn========-->
<button id="send_feedback">Явуулах</button>
</div>
</div>
Need help to show "default" picture in the imageHolder when pages is loaded in JavaScript and replaced whit picture from the button click.
<script type="text/javascript">
function changeImg(image) {
var imghol = document.getElementById("imageHolder");
imghol.src = image;
}
</script>
<div class="row">
<div class="col-s-4 col-m-12 col-l-12 col-xl-12">
<p>
<onload="changeImg('0.jpg')">
</p>
<p id="imageHolder" "changeImg('/upload_dir/pics/Beo/BeoLab/3/BLa3-Black.jpg')"></p>
<p style="text-align: center; font-size:6px;"><a class="button" onclick="changeImg('1.jpg')" style="background-color: #000;" title="sort">·</a>
</p>
<p style="text-align: center; font-size:6px;"><a class="button" onclick="changeImg('2.jpg')" style="background-color: #d2d2d2;" title="sort">·</a>
</p>
</div>
<div class="col-s-4 col-m-12 col-l-12 col-xl-12">
<div class="panel" id="pic" style=" background-color:#fff;">
<img id="imageHolder" / class="responsive">
</div>
</div>
</div>
Currently I have some code that looks like so;
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="**HERE**">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none'">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>
So when I click the sign up button, I want the div to change to the signup div below, but using the same coding type (if possible) that I used for closing the window. I know it's obvious that I'm a beginner, but I've been searching everywhere and playing around with different techniques but I just can't figure it out!
Really as simple as this:
#signup {
display: none;
}
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>
And if you want a version that hides the Welcome layer before show the Signup layer:
#signup {
display: none;
}
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';document.getElementById('welcome').style.display='none'">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>
Use Jquery :
$("#intro_signup_button").click(function() {
$("#signup").show();
});
$("#intro_back_button").click(function() {
$("#signup").hide();
});
$("#intro_signup_button").click(function() {
$("#signup").show();
});
$("#intro_back_button").click(function() {
$("#signup").hide();
});
#signup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button">SIGN UP</button>
<button id="intro_back_button">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>show sign up</p>
</div>
</div>
i have a load more button that load 10 new hidden div's on click, the problem is that i have 40 hidden div's and the button is setting at the end of the 40's div even when they are hidden, i just want it's position to be directly under the last div shown so when you click it it should load 10 more hidden div's and go down directly to set under the last new shown div. any idea's?
here is the html code(not that the hidden div'd that should show up on button click are the div's of the 's:
<html>
<head>
<script src="jquery-1.12.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="leb news.css">
<title> leb news</title>
</head>
<div class="all" dir="rtl" lang="ar">
<body>
<div class="header">
<h1>
اخبار لبنان
<img src="paper.gif" alt="paper" height="115" />
LebNews
</h1>
</div>
<div class="clockall">
<div class="clock">
<div class="list">
<TABLE id="T_Menu" height="100%" cellSpacing="0" cellPadding="0" width="181" border="0" style="float: right">
<TD height="100%" vAlign="top" rowSpan="2" width="181" align="center">
<TABLE id="T_Menu" height="100%" cellSpacing="0" cellPadding="0" width="181" border="0">
<TR>
<TD style="BACKGROUND-IMAGE: url(Images/Menu/bgd.gif); BACKGROUND-ATTACHMENT: fixed; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: left top"
vAlign="top" align="center" bgColor="transparent" height="100%"> <TABLE id="T_Menu" cellSpacing="0" cellPadding="0" width="80%" border="0">
<TR>
<TD vAlign="middle" align="center" height="100"><BR>
</TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD align="center"><table cellspacing="0" rules="all" border="1" id="Menu1_Ad_menu" style="border-collapse:collapse;">
<tr align="Center" style="color:#ffa500;background-color:#ffa500;border-width:0px;border-style:Groove;font-family:Trebuchet MS;font-size:12pt;font-weight:bold;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl1:ad_button" value="الرئيسية" id="Menu1_Ad_menu__ctl1_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl2:ad_button" value="اخبار" id="Menu1_Ad_menu__ctl2_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl3:ad_button" value="فن" id="Menu1_Ad_menu__ctl3_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl4:ad_button" value="رياضة" id="Menu1_Ad_menu__ctl4_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl5:ad_button" value="أدب" id="Menu1_Ad_menu__ctl5_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
</table>
</table>
</table>
</table>
</div>
<div class="article" align="right" style="display: inline-block;" >
<br>
<div class="27" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="28" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="29" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="30" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="31" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="32" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2" >
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="33" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="34" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<div class="button">
<button type="button" name="more" id="load">More</button>
</div>
</body>
</html>
here is the jquery of the button:
$(document).ready(function(){
$("div").slice(0, 14).show(); // select the first ten
$("#load").click(function(e){ // click event for load more
e.preventDefault();
$("div:hidden").slice(0, 10).show();
// select next 10 hidden divs and show them
if($("div:hidden").length == 0){ // check if any hidden divs still exist
alert("No more divs"); // alert if there are none left
}
});
})
and the css :
html {
background: url(32784_FLS_W01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header h1{
position: absolute;
/*background-color:#C63D0F; */
background-color:transparent;
padding:50px;
padding-left:250px;
padding-right:200px;
margin-left:65px;
margin-right:65px;
font-size:80px;
/* vertical-align: top; */
}
.all {
width: 1370px;
/*height: auto;*/
}
.list {
padding-top:0px;
padding-right:65px;
}
.article img{
height:150px;
width:150px;
border:"5";
}
.article p{
width:800px;
height:65px;
font-size:16pt;
color:black;
text-decoration: none;
}
.article{
padding-top:0px;
/*overflow:hidden;*/
}
ul #mylist li{ list-style-type: none;
}
#mylist li{display:none;}
ul #mylist li img{
height:150px;
width:150px;
border="5";
}
#load {
/* position: fixed; */
height: 30px;
width: 100%;
margin-top:0px;
overflow:hidden;
}
i really tried too many things in css to make it work but it seems that it should be worked jquery or javascript. hope somebody can help.
thanks alot.
https://jsfiddle.net/x3azn/3u46oh39/4/
working sample, off the top of my head, your class for
<div class=<missing quote>button">
<button type="button" name="more" id="load">More</button>
</div>
isn't quoted, but other than that you should post the real code
I just tried your code and there is nothing wrong, maybe instead of this line
$("div:hidden").slice(0, 10).show();
your can tried this
$("div:hidden").slice(0, 10).css('display','block');
If this doesnt work, you could tried pasting all your css and i could check it out what wrong, maybe another class is interfering with your button. Good luck
I have one vertical slider page.
in every slide I have one image and I have iphone container.
like
now this page slides vertically show next slides comes in center and its also contains image on center.
now I want something like that image only displayed when its comes in iphone container.
as here in second image my images showing even out of iphone container so I dont want to do that
my code
<div style="display: block; position: fixed; top: 14.5px; left: 684px;" class="iphone_container"><img title="" src="/img/iphon.png"></div>
<div class="port_list">
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
</div>
You create a container div for your phone and put there a div for the sildes. with overflow:hidden you can hide the additional content.
<div id="phone">
<div id="slides">
<img src="pic1.png" />
<img src="pic2.png" />
<img src="pic3.png" />
</div>
</div>
<input type="button" value="slide up" onclick="slide('up')" />
<input type="button" value="slide down" onclick="slide('down')" />
Check this fiddle: http://jsfiddle.net/qfzBk/2/