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/
Related
When this code pops up as a form it works well, but when I press "Don't have an Account.." it redirects to the Parent Directory.
Can someone help?
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
<div class="header">
<ul class="headerList">
<li id="item"> Home</li>
<li id="item"> About us</li>
<li id="item"> Contact us</li>
<li id="popup-login">
<button onclick="togglePopup()">Login/Register</button>
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<form class="form" id="login">
<h1 class="form__title">Login/Register</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or email">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text">
Forgotten your password?
</p>
<p class="form__text">
<a class="form__link" href="./" id="linkCreateAccount">Don't have an account? Create account?</a>
</p>
</form>
The problem is that by clicking on the button you are clicking on a link <a> with href="./".
The solution for this case should be: implementing javascript trigger instead of usual html-link:
<a class="form__link" href="void(0);" onclick="toggleCreateAccountPopup()" id="linkCreateAccount">Don't have an account? Create account?</a>
Here, href is voided, and JS-trigger toggleCreateAccountPopup() is called - instead of linking to parent dir.
I have two set of div containers with input tags with same classes to both.
only difference is when input box of each clicked the resepctive parent div will add "frame-focus" class. what i want is if input is clicked and frame-focus class is exist, hide the div which has class "panel-set" of which the focus class exist.
Please check my div containers below. please advice how to proceed this
Ex:
<!--- here is 1st div container which input box is selected-->
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set"></div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set"></div>
</div>
</div>
Use the child selector or the direct child selector to hide the .panel-set which is a child of .frame-focus:
.frame-focus > .panel-set {
display: none;
}
<!--- here is 1st div container which input box is selected-->
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set">1</div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set">2</div>
</div>
</div>
html
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set">1</div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set">2</div>
</div>
</div>
jquery
$(document).ready(function(){
$("input").click(function() {
$(this).siblings('.panel-set').hide();
});
});
Example jsfiddle
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>
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.