|
I want to create a sliding effect of the backface contents of my image using CSS3.
<html><body><div class="about">
<div class="students">
<div class="frontface">
<img src="bill.jpg" style="width:250px;height:250px;" /></div>
<div class="backface">
<h3>Bill Gates</h3>
<h4 class="profession">Former Microsoft CEO</h4>
</div>
</div>
<div class="students">
<div class="frontface">
<img src="andrew.jpg" style="width:250px;height:250px;"/>
</div>
<div class="backface">
<h3>Andrew Ng</h3>
<h4 class="profession">Director of Standford AI lab</h4>
</div>
</div>
<div class="Students">
<div class="frontface">
<img src="sebastian.jpg" style="width:250px;height:250px;"/></div>
<div class="backface">
<h3>Sebastian Thurn</h3>
<h4 class="profession">Robotics</h4>
</div>
</div>
</div>
</body></html>
.about{
position:relative;
display:inline-block;
z-index:1;
float:left;
width:100%;
height:auto;
margin-top:10px;
padding:0;
}
.students{
width:250px;
height:250px;
float:left;
margin:20px;
margin-left:150px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
}
.frontface , .backface{
position:absolute;
width:250px;
height:250px;
}
.frontface{
background-size:cover;
}
.backface{
background-color:#000;
opacity:0.7;
backface-visibility:hidden;
text-transform:uppercase;
text-align:center;
font-size:13px;
z-index:-1;
color:white;
transition:color 0.5s linear,font-size 0.1s linear;
}
.frontface:hover{
z-index:-1;
}
This works good but i am unable to create a sliding effect from the bottom of the image to the top of the image.Any help would be appreciated.
This site gives a good example of it.
Please check out "meet the crew" heading on the homepage of this website
http://www.magneticcreative.com/[^]
Thank you
|
|
|
|
|
I realize it will have to be 100% JavaScript + html5 and with limitation of file accessing due to security, but has anyone developed a web application that both work as a web (over the Internet) as well as offline. I also realize that the entire application files will have to be downloaded into the client machine. Would you mind sharing some of your experience? Strategy, difficulty, limitations, security?
Thanks.
|
|
|
|
|
first the form is going to display and there will be one button "add new form" as soon as if user click on that button then it will display the new form and as on it will click on that button at as on the form will display i have created the first form code.
Can u please give a php code for it.
<div class="col-md-2">
<form method="post" action="index.php" name="new_frm">
<input type="Submit" value="Add New Form" class="btn btn-info" name="add_frm"/>
</form>
</div>
<div class="panel-body">
<form action="index.php" method="post" name="test" onsubmit="return function_name()">
<table class="table">
<tr>
<td>Date</td>
<td>Ticket No</td>
<td>Type of Work</td>
<td>Incident Source</td>
<td>Description</td>
<td>T2T</td>
<td>User Impacting</td>
<td>Sprint</td>
<td>Root Cause</td>
<td>Action Taken</td>
</tr>
<tr>
<td><input type="text" name="date" style="width: 50px;"/></td>
<td><input type="text" name="tck_no" style="width: 50px;" /></td>
<td><select name="ddl1" style="width: 70px;">
<option value="">Select Any One</option>
<option value="incident">Incident</option>
<option value="assign_task">Assgin Task</option>
<option value="rfc">RFC</option>
</select></td>
<td><select name="ddl2" style="width: 70px;">
<option value="">Select Any One</option>
<option value="qrs">QRS</option>
<option value="ps_bug">PS-Bug</option>
<option value="email">Email</option>
<option value="scom">SCOM</option>
</select></td>
<td><textarea cols="40" rows="4" name="desc" style="width: 100px;"></textarea></td>
<td><select name="ddl3" style="width: 70px;">
<option value="">Select Any One</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select></td>
<td><select name="ddl4" style="width: 70px;">
<option value="">Select Any One</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select></td>
<td><input type="text" name="sprint" style="width: 100px;"/></td>
<td><textarea cols="40" rows="4" name="root_cause" style="width: 100px;"></textarea></td>
<td><textarea cols="40" rows="4" name="action_taken" style="width: 100px;"></textarea></td>
</tr>
<tr>
<td><input type="submit" class="btn btn-primary" name="send" /></td>
<td><input type="reset" class="btn btn-danger" name="send" /></td>
</tr>
</table>
</form>
=''='post'='new_frm'='return validate_new_frm()'";
echo "<table class='table'>";
echo "<tr>";
echo "<td>Date</td>";
echo "<td>Ticket No</td>";
echo "<td>Type of Work</td>";
echo "<td>Incident Source</td>";
echo "<td>Description</td>";
echo "<td>T2T</td>";
echo "<td>User Impacting</td>";
echo "<td>Sprint</td>";
echo "<td>Root Cause</td>";
echo "<td>Action Taken</td>";
echo "</tr>";
echo "<tr>";
echo "<td><input type='text' name='date' style='width: 50px;'/></td>";
echo "<td><input type='text' name='tck_no' style='width: 50px;' /></td>";
echo "<td><select name='ddl1' style='width: 70px;'>";
echo "<option value=''>Select Any One</option>";
echo "<option value='incident'>Incident</option>";
echo "<option value='assign_task'>Assgin Task</option>";
echo "<option value='rfc'>RFC</option>";
echo "</select></td>";
echo "<td><select name='ddl2' style='width: 70px;'>";
echo "<option value=''>Select Any One</option>";
echo "<option value='qrs'>QRS</option>";
echo "<option value='ps_bug'>PS-Bug</option>";
echo "<option value='email'>Email</option>";
echo "<option value='scom'>SCOM</option> ";
echo "</select></td>";
echo "<td><textarea cols='40' rows='4' name='desc' style='width: 100px;'></textarea></td>";
echo "<td><select name='ddl3' style='width: 70px;'>";
echo "<option value=''>Select Any One</option>";
echo "<option value='yes'>Yes</option>";
echo "<option value='no'>No</option>";
echo "</select></td>";
echo "<td><select name='ddl4' style='width: 70px;'>";
echo " <option value=''>Select Any One</option>";
echo "<option value='yes'>Yes</option>";
echo "<option value='no'>No</option>";
echo "</select></td>";
echo "<td><input type='text' name='sprint' style='width: 100px;'/></td>";
echo "<td><textarea cols='40' rows='4' name='root_cause' style='width: 100px;'></textarea></td>";
echo "<td><textarea cols='40' rows='4' name='action_taken' style='width: 100px;'></textarea></td>";
echo " </tr>";
echo "<tr>";
echo "<td><input type='submit' class='btn btn-primary' name='send' /></td>";
echo "<td><input type='reset' class='btn btn-danger' name='send' /></td>";
echo "</tr>";
echo "</table>";
echo " </form>";
}
?>
|
|
|
|
|
I'm sorry but today we don't handle more PHP requests - come back later on the week...
But really - it's not a question. first of all it make no sense! Then you made no effort (or show none) about the PHP part.
Improve your non-question so we can help you out!
I'm not questioning your powers of observation; I'm merely remarking upon the paradox of asking a masked man who he is. (V)
|
|
|
|
|
i have been asked to create MVC web api for chatting application the client will be an android device,can any one suggest me should i go for the socket programming? i am new to web api in C# can anyone provide the algorithm for creating chatting application API any kind of help will be appreciated
|
|
|
|
|
|
|
A byte array is passed to my WCF service application from an android device.
Now Problem is how to capture or access that byte array and saving it as an image to drive on my machine. ???
|
|
|
|
|
Do you know the structure of the data in the array?
Veni, vidi, abiit domum
|
|
|
|
|
Hi, myself Mahi bhat, i am new in web development knows HTML & li'l bit 5 also, CSS, PHP, my question is i want to do something like making my own HTML5 templates or any other thing in web designing but i have no idea where to start & how to start. Plz help me to get rid out of this.
|
|
|
|
|
Well Mahi . You can Start from so many ways like First plan what should be the theme of a Website . Then start collecting Pictures to put in that website . then either you can get a Free HTML Templates from so many sites or you can get your own . by Start developing your Index.html page either in Visual Sudio or in Dreamweaver . as you are new so i will recommend Dreamweaver for you .
Start Using to create a Partition , to Place your particular thing Direction as per you
for gap between 2 lines .
|
|
|
|
|
Thanks bro Navneet , but i need some elaborated expamle, not with respect to use dreamviewer coz i am using it...
but i need some concept how to start will u give me step wise example with a theme.
|
|
|
|
|
Well surely ,
For that do revert me on navneet@nkwebart.net so that can get connected via email for further explanation regarding Coding as well as Development
Regards
Navneet k son
http://nkwebart.in
|
|
|
|
|
You could clarify things here(in discussion forum) instead of private mail. Because if you share the solution here, it'll help many others in future when they search similar things using search engines.
Besides, don't give him fish, just teach him "how to fish".
And don't post your email id in public discussion forum else spammers could mess with that easily.
thatrajaCode converters | Education Needed
No thanks, I am all stocked up. - Luc Pattyn
When you're wrestling a gorilla, you don't stop when you're tired, you stop when the gorilla is - Henry Minute
|
|
|
|
|
Go with Bootstrap[^]
thatrajaCode converters | Education Needed
No thanks, I am all stocked up. - Luc Pattyn
When you're wrestling a gorilla, you don't stop when you're tired, you stop when the gorilla is - Henry Minute
|
|
|
|
|
Thanks Thatraja , i appreciate ur rply but i don't think that bootstrap is useful for me at fresher level...
|
|
|
|
|
I often do a quick jump into a topic at W3C Schools^
Since they also usually include a reference page, it works as a combination tutorial/reference.
References are not always 100% complete, but once you are refreshed, you can use proper web searches to answer more difficult questions.
Note the menu bar for links to javaScript, php, CSS, etc.
| "The difference between genius and stupidity is that genius has its limits." - Albert Einstein | | "As far as we know, our computer has never had an undetected error." - Weisert | | "If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010 |
|
|
|
|
|
Hi Everyone,
I am new to web development and I have simple question regarding Template 1.4.1.
I have 7 regions as shown below. My default controller renders those regions in template and it was good (See index method below). However, I would like to see the same layout, but with different content. Exactly the same except for content region.
I am wondering if there's a way I can achieve what I want without writing again the same command in index method. A one liner code probably or two. Can you show me how?
I tried the override in write_view and I can't make it work or I misunderstood the use of it. See add function below.
[code]
$template['default']['regions'] = array(
'headerstyles',
'header',
'banner',
'rightfilter',
'content',
'scripts',
'footer',
);
[/code]
Index method
[code]
public function index()
{
$this->template->write_view('headerstyles', 'headerStyles');
$this->template->write_view('header', 'header');
$this->template->write_view('scripts', 'scripts');
$this->template->render();
}
[/code]
Add function. addItem is existing and elements in addItem is rendered but without the other regions.
[code]
public function add()
{
$this->template->write_view('content','addItem','',true);
$this->template->render();
}
[/code]
Thank you very much!
|
|
|
|
|
I'm losing my mind here, my background is largely writing Windows Services/Console Applications etc, but recently I have got into Web development, and am currently working on a project using Twitter Bootstrap.
I'm trying to make the Navbar bigger (height-wise) and vertically center the elements, and nothing is working! No matter what I change, the Navbar looks exactly the freaking same.
My starting point is the carousel template here and haven't changed much yet appearance wise (mainly colours). What would I have to change on that template to achieve this effect, I can post code if asked to.
Cheers
|
|
|
|
|
When I started using bootstrap I found it difficult to manipulate also. I hear your frustration! What I did was start using firebug with firefox as an aid so I could click on the page and see what element I was dealing with then try and find that element in the css file, see what the settings were and change them to see what happened: to see if it was getting me where I wanted to go. I am sure chrome or other browsers must have something similar so you can view what the existing css is and try stuff. Search the bootstrap css file for .navbar and you will see a min-height setting. Try changing that and see what happens. Find the navbar container and change the padding-left...investigate and try things.
vbmike
|
|
|
|
|
I need to get the userId from URL and then build the href dynamically.
For example in the URL the userId is Tom
then I want to build the href as
../settings/userIdSetting.htm?userId=Tom
and assign it to <a id= "userSettingId" href="../settings/userIdSetting.htm?userId=Tom">User Account </a>
Is this possible.
Thanks in Advance,
Kim
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sortable Table</title>
<script language="javascript" type="text/javascript" src="../js/common.js"></script>
<script language="javascript" type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script language="javascript" type="text/javascript" src="../javascript/d3.v3.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/shCore.js"></script>
<script language="javascript" type="text/javascript" src="../js/shBrushJScript.js"></script>
<link type="text/css" href="../css/shCoreDefault.css" rel="stylesheet" />
</head>
<script>
<pre lang="xml">// get the userId from URL
var userId = getUrlVar('userId');
function putUserId() {
document.getElementById("userSettingId").innerHTML = "../settings/userIdSetting.htm?userId=" + userId ;
}
</script>
<body onLoad = putTenantId()>
<h2>Server Settings</h2>
<!-- Need to get the userId from URL -->
<a id= "userSettingId" href="../settings/userIdSetting.htm?userId=Tom">User Account </a>
<br/>
<br>
<hr>
</body>
</html></pre>
|
|
|
|
|
would want it in PHP?
if yes:
<?php
$userId = $_GET['userId'];
?>
<a id= "userSettingId" href="../settings/userIdSetting.htm?userId=<?php echo $userId; ?> >User Account </a>
This should work
|
|
|
|
|
how do I create a prototype for my business plans 
|
|
|
|
|
By doing research and asking proper questions. Try your local chamber of commerce or other business association.
Veni, vidi, abiit domum
|
|
|
|
|
Do Google search with proper keywords like "Mock-up" or "Prototype"
thatrajaCode converters | Education Needed
No thanks, I am all stocked up. - Luc Pattyn
When you're wrestling a gorilla, you don't stop when you're tired, you stop when the gorilla is - Henry Minute
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
