Hi my full code is in jsfidlle here, i want when i will mouseover or click in "giris" my div to be appear in mouseout to dissappear , how can i do it ?
My Code :
<div class="sign_in_holder">
<div class="tab-content">
<div class="option_content tab-pane tcell-login-box active" embeddedlogin="true" id="trk-sign_in">
<form id="user_sign_in" class="sign_in js-do_login">
<ol class="steps clearfix">
<li>
<input type="text" class="text input_restrict_decimal tcell-user" maxlength="11" placeholder="GSM Numaranız" title="GSM Numaranız">
</li>
<li class="password">
<input type="password" class="text tcell-password" maxlength="15" placeholder="Turkcell Şifreniz" title="Turkcell Şifreniz">
</li>
<li>
<button type="button" id="signin_button" class="btn button-cta tcell-submit-btn">GİRİŞ YAP</button>
</li>
</ol>
</form>
</div>
</div>
</div>
<span class="dropbox_position_element carrot_up"></span></div>
<span class="dropbox_position_element carrot_up"></span></div></li>
Check This DEMO
If you want a css only solution you can use this code:
Ankit demo:
http://jsfiddle.net/6XDBE/7/
your demo:
http://jsfiddle.net/h4TMu/5/
.nav-actions:hover .dropbox{
display: block!important;
}
.dropbox:hover{
display: block!important;
}
you can see the edit at the end of the css, the important is caused by the inline dysplay:none
but in this case you need to use the parent (container) so you need to take in consideration the dimension of it.
Related
I am learning framework7 and I wonder if it is possible to create an input type="text" outside UL tag. On the code below, the css is not rendering on my textfield. Please see code comments.
And here is the fiddle.
<!-- THIS WILL WORK -->
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="text" name="name">
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- NOW, WHAT IF WE WON'T SHOW TEXTFIELD IN INSIDE UL? -->
<!-- THE CSS WON'T WORK ANYMORE, IDK WHAT IS THE CORRECT CSS CLASS EITHER TO WRAP THE ELEMENT -->
<div class="content-block">
<input type="text" />
</div>
If you put the input outside the list, you will lose the separating lines, but it is possible adding the required classes:
<!-- THIS WILL WORK -->
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="text" name="name">
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- NOW, WHAT IF WE WON'T SHOW TEXTFIELD IN INSIDE UL? -->
<div class="content-block list-block">
<div class="item-input">
<input type="text" value="text here" />
</div>
</div>
Here: https://jsfiddle.net/k5gd7Lww/10/
I am trying to put my form on a slider in such a way that slider seems to be running in the background of form. If I am using position absolute, then I have to apply a lot of margin and top pixels because there is a navbar above the slider and position absolute applies with respect to the parent element(navbar).
How can I exactly target the position absolute w.r.t my form, not navbar (parent element)?
Or
If you guys think that there can be a better option to deal with this then do share ideas!
Thanks in advance!
Here is the demo link
HTML code:
<section id="main-slider" class="carousel">
<!--start-->
<div id="ninja-slider">
<div class="slider-inner">
<ul>
<li class="dummySlide">
<a class="ns-img" href="img/002.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/003.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/004.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/005.jpg"></a>
</li>
<li>
<a class="ns-img" href="img/zess.jpg"></a>
</li>
</ul>
<div class="navsWrapper">
<div id="ninja-slider-prev"></div>
<div id="ninja-slider-next"></div>
</div>
</div>
</div>
<!--end-->
</section><!--/#main-slider-->
<form role="form">
<!--First Row-->
<div class="row">
<div class="form-group col-md-6">
<label for="inputTopic" class="control-label">Title</label>
<select class="form-control" name="title">
<option value="0">Select</option>
<option value="one">Mr.</option>
<option value="two">Miss</option>
<option value="three">Mrs.</option>
<option value="four">Dr.</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputTopic" class="control-label">Sur-Name</label>
<input type="text" class="form-control" name="surname" />
</div>
</div>
</form>
I do have a working example which uses TWBS's carousel. I created a wrapper .container which has a slider and a form as children. The slider is fullwidth while the form has a width of 70% so it will always be responsive, the height is static for now, you could change this using media-queries. Here is my example:
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
</div>
<div class="myform">
<h1> My Form </h1>
<form>
...
</form>
</div>
</div>
Bootply: http://www.bootply.com/tNAmbhKWb7
You don't have wrapper with class="formSection" for the form and also you should delete a bottom: 0 from formSection class.
<div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;">
Where you declare the <div class="row">
put this code
<div class="row" style="position:relative; top:-200px; z-index:3; text-align:center;"
This will definitely work
I have three columns of equal width of col-md-4, however the middle one has an ng-show set on it and sometimes will not be displayed. Right now when friend requests come in and the right most col-md-4 comes up, it is showing up in the middle when the middle one is still hidden. How do I still have the middle col-md-4 chatWindow take up space even when it is hidden?
<div class="row">
<div class="col-md-4 friendListWindow" ng-init="getFriends()">
Friends List
<form ng-submit='addFriend(username)' name='addFriendForm'>
<input type='text' name='username' ng-model='username' required/>
<input type='submit' ng-disabled='!addFriendForm.$valid' value='Add Friend'>
</form>
Online Friends
<ul>
<span ng-repeat='friend in friends track by $index | orderBy:"name"' ng-click='startChat(friend)'>
<li ng-if='friend.online'>
<span class='friendService'>{{friend.service}}</span>
<span class='friendName'>{{friend.name}}</span>
</li>
</span>
</ul>
</div>
<div class="col-md-4 chatWindow" ng-show="activeFriend">
<div class="activeFriendBox">Chat with {{activeFriend.name}}</div>
<div class="messages">
<div ng-repeat='message in activeFriend.messages track by $index | orderBy:"timeStamp"'>
<span>{{message.from}}</span>
<span>{{message.message}}</span>
<span>{{message.timestamp}}</span>
</div>
</div>
<div class="sendMessage">
<form ng-submit='sendMessage(messageText)' name='messageForm'>
<input type='text' name='message' ng-model='messageText' required/>
<input ng-disabled='!messageForm.$valid' type='submit' value='send'/>
</form>
</div>
</div>
<div class="col-md-4 friendRequestsWindow">
<div class="friendRequests">
<ul>
<li ng-repeat='friend in friendRequests track by $index'>
<span>New friend Request from: {{friend}}</span>
<button ng-click='acceptFriendRequest(friend)'>Accept</button>
<button ng-click='ignoreFriendRequest(friend)'>Ignore</button>
</li>
</ul>
</div>
<div class="acceptedFriendRequests">
<ul>
<li ng-repeat='friend in acceptedfriendRequests track by $index'>
<span>{{friend}} accepted your friend request</span>
<button ng-click='acknowledgeFriendRequest($index)'>Acknowledge</button>
</li>
</ul>
</div>
</div>
</div>
You can use ng-show in the col content instead of the col itself
Instead of
<div class="col-md-4" ng-show="xxx">content</div>
Use
<div class="col-md-4">
<div ng-show="xxx">content</div>
</div>
So, if you go to: https://www.waveapps.com/ and click on 'Sign in' you'll get a nice drop down to sign in with.
How might I create something like this? I'm using Twitter Bootstrap, and rather than re-directing the users to a sign-in page I'd like to have a similar drop down to allow users to sign-in. It's simply more appealing.
How might I do this?
Any help would be way cool!!
Cheers!
Try this
HTML
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- Collapsable nav bar --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Your site name for the upper left corner of the site --> <a class="brand">My Site</a>
<!-- Start of the nav bar content -->
<div class="nav-collapse">
<!-- Other nav bar content -->... ...
<!-- The drop down menu -->
<ul class="nav pull-right">
<li>Sign Up
</li>
<li class="divider-vertical"></li>
<li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me">Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Script
$(function () {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function (e) {
e.stopPropagation();
});
});
DEMO
You could use Bootstrap's popover or Modal features.
See docs here
Simply position a div above the viewable window, for example if it is 200px high, give it a css top value of -80px so the bottom of it is just at the top of your screen, then when hovered animate the div into view.
#loginbox {
top:-80px;
width:600px;
height:100px;
}
and
$('#loginbox').hover(function() {
$(this).stop().animate({'top', '0px'}, 1000
}, function() {
$(this).stop().animate({'top', '-80px'},750
});
I have designed a page with ParentTabs and ChildTabs, now on ParentTabs are displayed childTabs with other content each. How can I do that action button (continue) to go to the next child tab in order to display the other content tab.
<div id="content">
<div class="tineUl">
<ul class="mainUl">
<li class="selected"><a><span>TabOne</span></a></li>
<li><a><span>TabTwo</span></a></li>
<li><a><span>ThirdTab</span></a></li>
<li><a><span>FourthTab </span></a></li>
</ul>
</div>
<div id="subContent">
<div class="tineUl">
<ul class="subMainUl">
<li class="selected"><a><span>TabOne</span></a></li>
<li><a><span>TabTwo</span></a></li>
<li><a><span>ThirdTab</span></a></li>
<li><a><span>FourthTab </span></a></li>
</ul>
</div>
<div id="subContentChild">
<p>
SubContent Menu Zone.
</p>
<input type="submit" class="button" value="Cancel"></input>
<input type="submit" class="button" value="Continue"></input>
</div>
</div>
</div>
fiddle: http://jsfiddle.net/Ksb2W/138/
http://os.alfajango.com/easytabs/#twitter-contact choose your tabs .