function myFunction() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV").style.display = "inline";
}
function myFunction1() {
document.getElementById("myDIV1").style.display = "inline";
document.getElementById("myDIV").style.display = "none";
}
#myDIV {
position: fixed;
top: 40px;
left: 7px;
width: 1212px;
height: 620px;
display: none;
z-index: 600;
}
#myDIV1 {
position: fixed;
top: 40px;
left: 7px;
width: 1212px;
height: 620px;
display: none;
z-index: 600;
}
#shadow {
background: rgba(202, 188, 160, 0.6);
position: fixed;
top: 47px;
left: 213px;
width: 801px;
height: 570px;
-webkit-box-shadow: 9px 5px 27px 5px rgba(71, 68, 71, 0.57);
-moz-box-shadow: 9px 5px 27px 5px rgba(71, 68, 71, 0.57);
box-shadow: 9px 5px 27px 5px rgba(71, 68, 71, 0.57);
}
.privacy-stat {
background: rgba(254, 254, 254, 0.9);
position: fixed;
width: 759px;
height: 500px;
overflow: auto;
top: 75px;
margin: auto;
padding: 20px;
left: 213px;
border-width: 1px;
border-style: solid;
border-bottom-color: #666666;
border-left-color: #666666;
border-top-color: #666666;
border-right-color: #666666;
}
#title-bar {
background-color: #CCCCCC;
width: 799px;
height: 27px;
position: fixed;
left: 213px;
top: 47px;
border-width: 1px;
border-style: solid;
border-bottom: none;
border-left-color: #666666;
border-top-color: #666666;
border-right-color: #666666;
z-index: 600;
}
#close {
position: fixed;
width: 26px;
height: 26px;
position: relative;
left: 769px;
top: -1px;
}
<a onClick="myFunction()" href="#" class="button"><span>ADD EMPLOYEE</span></a>
<a onclick="myFunction1()" href="#" class="button"><span>EDIT</span></a>
<div id="myDIV">
<div id="shadow">
<div class="privacy-stat">
<div id="title-bar">
<div id="close">
<img src="<?php echo base_url(); ?>assets/img/cancel.svg" height="30" width="30"/>
</div>
</div>
<div class="sky-tabs sky-tabs-pos-top-left sky-tabs-response-to-icons">
<input type="radio" name="sky-tabs" checked="" id="sky-tab1" class="sky-tab-content-1">
<label for="sky-tab1"><span><span>Contact</span></span>
</label>
<input type="radio" name="sky-tabs" id="sky-tab2" class="sky-tab-content-2">
<ul>
<li class="sky-tab-content-1">
<div class="typography">
style="word-spacing: 1px;font-size:12px;">
<fieldset>
<legend>
<p>GENERAL</p>
</legend>
<div class="inputwrap">
<label>Employee id:</label>
<input type="text" id="" name="id" value="<?php echo set_value('id'); ?>">
</div>
</br>
<div class="inputwrap">
<label>First name:</label>
<input type="text" id="" name="emp_first_name" pattern="[a-zA-Z]+" title="enter a valid name only characters are allowed" value="<?php echo set_value('emp_first_name'); ?>">
</div>
</br>
<div class="inputwrap">
<label for="inputError">Last name:</label>
<input type="text" id="" name="emp_last_name" pattern="[a-zA-Z]+" title="enter a valid name only characters are allowed" value="<?php echo set_value('emp_last_name'); ?>">
</div>
</br>
<div class="inputwrap">
<label for="inputError" class="control-label">Email id</label>
<input type="text" id="" name="emp_email_id" pattern="^\w+#[a-zA-Z_]+?\.[a-zA-Z]{2,3}$" title="enter a valid email for example sample#sample.com" value="<?php echo set_value('emp_email_id'); ?>">
</div>
</br>
<div class="inputwrap">
<label for="inputError">Emergency contact</label>
<input type="text" name="emp_emergency_contact" pattern="[0-9]{10}" title="enter valid contact. it must contain 10 digits" value="<?php echo set_value('emp_emergency_contact'); ?>">
</div>
</br>
<div class="inputwrap">
<label>Category:</label>
<?php echo form_dropdown( 'category', $options_designation, set_value( 'category'), 'class="span2"'); ?>
</div>
</br>
<div id="designation">
<?php if($this->uri->segment(2) == 'designation');?>
<span>Add</span>
</div>
</br>
<div class="inputwrap">
<label>Date of hire</label>
<input type="date" name="emp_date_of_hire" value="<?php echo set_value('emp_date_of_hire'); ?>">
</div>
</br>
<div class="inputwrap">
<label>Date of termination</label>
<input type="date" name="emp_date_of_termination" value="<?php echo set_value('emp_date_of_termination'); ?>">
</div>
</br>
<div class="inputwrap">
<label>Date of rehire</label>
<input type="date" name="emp_date_of_rehire" value="<?php echo set_value('emp_date_of_rehire'); ?>">
</div>
</br>
<div class="inputwrap">
<label>Referenece number</label>
<input type="text" name="emp_reference_num" pattern="[0-9]{10}" title="enter valid contact. it must contain 10 digits" value="<?php echo set_value('emp_reference_num'); ?>">
</div>
</br>
<div class="inputwrap">
<label>System name</label>
<input type="text" name="system_name" value="<?=$system_name ?>">
</div>
</br>
<div class="inputwrap">
<button id="btn" type="submit">NOTES</button>
<button id="btn" type="submit">SAVE</button>
<button id="btn" type="reset">CANCEL</button>
</div>
</fieldset>
<?php echo form_close(); ?>
</fieldset>
</FONT>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--For edit-->
<div id="myDIV1">
<div id="shadow">
<div class="privacy-stat">
<div id="title-bar">
<div id="close">
<img src="<?php echo base_url(); ?>assets/img/cancel.svg" height="30" width="30"/>
</div>
</div>
<div class="sky-tabs sky-tabs-pos-top-left sky-tabs-response-to-icons">
<input type="radio" name="sky-tabs" checked="" id="sky-tab1" class="sky-tab-content-1">
<label for="sky-tab1"><span><span>Contact</span></span>
</label>
<ul>
<li class="sky-tab-content-1">
<div class="typography">
<p>This my edit page<p>
</ul>
</div>
</div>
</div>
<!--Edit end-->
I am using codeigniter.In my view page I have two element add and edit. For popup like window I have used element. For single buttons action I can get my results But when I have two buttons It do not work. Can someone solve this? Please help me code.
I have this script.Here I change the div elements display attribute.This div element appears only when the button is clicked.
<script>
function myFunction() {
document.getElementById("myDIV").style.display = "inline";
}
function myFunction1() {
document.getElementById("myDIV1").style.display = "inline";
}
</script>
This is my CSS. Here I have myDiv and myDiv1 for each popup window.
#myDIV {
position: fixed;
top: 40px;
left: 7px;
width: 1212px;
height: 620px;
display: none;
z-index: 600;
}
#myDIV1 {
position: fixed;
top: 40px;
left: 7px;
width: 1212px;
height: 620px;
display: none;
z-index: 600;
}
My view page.Here I have two button action add and edit. Here I called my script.
<div id="add">
<a onClick="myFunction()" href="#" class="button"><span>ADD EMPLOYEE</span></a>
<a onclick="myFunction1()" href="#" class="button"><span>EDIT</span></a>
</div>
This is my popup window content.
<div id="myDIV">
....
</div>
<div id="myDIV1">
.....
</div>
When adding another button action It also disturbs the first popup windows result.
I think your problem is when you click the ADD EMPLOYEE button again, it does not hide the EDIT pop and does not show the myDIV popup.
To solve this, what you have to do is, every time one of the buttons is clicked, first hide the existing popup using style.display = 'none'. Then show the relevant popup.
function myFunction() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV").style.display = "inline";
}
function myFunction1() {
document.getElementById("myDIV").style.display = "none";
document.getElementById("myDIV1").style.display = "inline";
}
#myDIV {
position: fixed;
top: 40px;
left: 7px;
width: 1212px;
height: 620px;
display: none;
z-index: 600;
}
#myDIV1 {
position: fixed;
top: 40px;
left: 7px;
width: 1212px;
height: 620px;
display: none;
z-index: 600;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myDIV">
MY DIV
</div>
<div id="myDIV1">
MY DIV 1
</div>
<div id="add">
<a onClick="myFunction()" href="#" class="button"><span>ADD EMPLOYEE</span></a>
<a onclick="myFunction1()" href="#" class="button"><span>EDIT</span></a>
</div>
you need to add <a herf="javascript:void(0);"></a> to anchor tag then it will work.
find codepen demo
<div id="add">
<span>ADD EMPLOYEE</span>
<span>EDIT</span>
</div>
<div id="myDIV">myDIV</div>
<div id="myDIV1">myDIV1</div>
Related
So, I have a posting system. When you type a post in the input field and click the submit button, the post displays with the help of PHP and AJAX.
Now on that post are stuff like a like button and comment button, and when you click the like button, it turns blue. Now, after making a post and the post displaying, clicking the like button will make it blue. However, let's say you make another post. For that post, everything works, except when you click the like button on the second or third post, it makes the like button on the first post only turn blue, similarly with the comment button. Also, the first post has a background color of silver (#C0C0C0), however any other post, like the second or third post, don't. They have no background color.
This stuff (turning blue on click) is accomplished using JavaScript. What I identified from this is that the JS isn't working for any other post besides the first post. To resolve this, I tried changing the position of the JS in the code because I thought it had something to do with the scope, but it didn't. Please help, with the JS and the background color issue.
PHP/HTML/CSS Code:
<style>
.textPost {
margin-top: 170px;
width: 650px;
height: 400px;
position: fixed;
background-color: #C0C0C0;
margin-left: 685px;
border-radius: 15px;
}
.textpostFormat {
margin-left: -640px;
position: fixed;
}
</style>
<div class="textPost">
<?php
$sql = "SELECT * FROM posts";
$result = mysqli_query($connection, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
<div class="textpostFormat" id="textpostFormat">
<img src="img/pfp.png" alt="pfp" onclick="location.href='profile.php'" class="textpostPFP">
<b><div class="textinfo"><?php echo $firstname . " " . $lastname ?></div></b>
<img src="img/options.png" alt="textpostOptions" class="textpostOptions">
<hr style="margin-top: 85px; width: 600px; position: fixed; margin-left: 663px; border:1px solid black; border-radius: 10px">
<hr style="margin-top: 200px; width: 600px; position: fixed; margin-left: 663px; border:1px solid black; border-radius: 10px">
<div class="textfeedbackBar" style="position: fixed">
<hr style="margin-top: 250px; width: 600px; position: fixed; margin-left: 663px; border: 1px solid black; border-radius: 10px">
<div class="textratingBar">
<div style="float: left; margin: 10px; cursor: pointer">1</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">2</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">3</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">4</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">5</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">6</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">7</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">8</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin: 10px; cursor: pointer">9</div>
<hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
<div style="float: left; margin-left: 275px; cursor: pointer; margin-top: 10px; position: fixed">10</div>
</div>
</div>
<hr style="margin-top: 320px; width: 600px; position: fixed; margin-left: 663px; border: 1px solid black; border-radius: 10px">
<img src="img/pfp.png" alt="commentpfp" onclick="location.href='profile.php'" class="textcommentPFP">
<input type="text" name="textComment" class="textComment" id="textComment" placeholder="Write a comment">
<p style="margin-left: 670px; margin-top: 95px; position: fixed; font-size: 45px; font-family: 'Rajdhani'"><?php echo $row["body"]; ?></p>
<div class="textPostData" style="position:fixed; font-family: 'Rajdhani'; margin-left: 820px; margin-top: 150px">
<h4 id="textDataLikes" style="cursor: pointer">0 Likes</h4>
<h4 id="textDataComments" style="margin-left: 102px; margin-top: -42px; cursor: pointer">0 Comments</h4>
<h4 id="textDataReactions" style="margin-left: 240px; margin-top: -42px; cursor: pointer">0 Reactions</h4>
</div>
<div style="margin-left: 715px; position: fixed; font-family: 'Rajdhani'">
<h2 style="margin-top: 206px; margin-left: -30px; cursor:pointer; padding: 5px; position: fixed" class="textLike" id="textLike" onclick="textLikeClick()"><i class="fa fa-thumbs-up"></i> Like</h2>
<h2 style="margin-left: 99px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="makeComment" id="makeComment" onclick="textCommentClick()"><i class="fa fa-comment" style="margin-top: 2px;"></i> Comment</h2>
<h2 style="margin-left: 290px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="textReact" id="textReact"><i class="fa fa-smile" style="margin-top: 2px;"></i> React</h2>
<h2 style="margin-left: 432px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="textShare" id="textShare"><i class="fa fa-share" style="margin-top: 2px"></i> Share</h2>
</div>
</div>
<div style="margin-left: 398px; margin-top: 236px">
<img class="textupvote" id="textUpvoteImg" src="img/upvote.png" alt="upvote" onclick="changetextUpvote()" style="width: 100px; margin-bottom: 28px; cursor: pointer">
<img class="textdownvote" id="textDownvoteImg" src="img/downvote.png" alt="downvote" onclick="changetextDownvote()" style="width: 55px; margin-top: 32px; margin-left: 21px; position: fixed; cursor: pointer">
</div>
<?php
}
}
?>
</div>
<?php
}
}
?>
</div>
AJAX code (to display posts without page refresh):
function makePost() {
var postContent = $("#postContent").val();
if (postContent.length > 0) {
jQuery.ajax({
url:"yourposts.php",
data:{
postContent: postContent
},
type:"POST",
success:function(data){
if (data == "success") {
$("#textpostFormat").html(postContent);
}
}
});
}
}
Javascript code (for turning like button blue and stuff):
<script type="text/javascript">
function changetextUpvote() {
var textUpvoteImg = document.getElementById('textUpvoteImg');
if (textUpvoteImg.src.match("orangeupvote")) {
textUpvoteImg.src = "img/upvote.png";
} else {
textUpvoteImg.src = "img/orangeupvote.png";
textDownvoteImg.src = "img/downvote.png";
}
}
function changetextDownvote() {
var textDownvoteImg = document.getElementById('textDownvoteImg');
if (textDownvoteImg.src.match("orangedownvote")) {
textDownvoteImg.src = "img/downvote.png";
} else {
textDownvoteImg.src = "img/orangedownvote.png";
textUpvoteImg.src = "img/upvote.png";
}
}
function textLikeClick() {
document.getElementById('textLike').style.color = "blue";
}
function textCommentClick() {
document.getElementById('textComment').focus();
}
</script>
None of the elements here have an ID attribute. Identification of elements is done based upon inspecting the event.target and navigating around the DOM using querySelector, parentNode and perhaps other techniques such as nextElementSibling etc
The buttons all register a single eventlistener which forks logic based upon a data-set attibute.
document.querySelectorAll('[type="button"]').forEach(bttn=>bttn.addEventListener('click',function(e){
let img=this.parentNode.querySelector('img');
let text=this.parentNode.querySelector('textarea');
switch(this.dataset.action){
case 'upvote':
img.src='img/orangeupvote.png';
img.classList.toggle(this.dataset.action)
break;
case 'downvote':
img.src='img/orangedownvote.png';
img.classList.toggle(this.dataset.action)
break;
case 'comment':
text.focus();
let fd=new FormData();
fd.set('comment',text.value);
fetch('yourposts.php',{method:'post',body:fd})
.then(r=>r.text())
.then(text=>{alert(text)})
break;
case 'like':
this.classList.toggle('liked')
break;
}
}));
.liked{background:blue;color:white}
textarea:focus{background:pink}
.upvote{outline:2px solid green}
.downvote{outline:2px solid red}
<div class="textPost">
<!--
<?php
$sql = "SELECT * FROM posts";
$result = mysqli_query($connection, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
?>
-->
<h1>Example data</h1>
<div class="textpostFormat">
<p>Lorem ipsum dolor solit...etc #1</p>
<img />
<input type='button' class='usr-interaction' data-action='upvote' value='Upvote' />
<input type='button' class='usr-interaction' data-action='downvote' value='Downvote' />
<textarea cols=50 rows=5>This is simply a comment...</textarea>
<input type='button' class='usr-interaction' data-action='comment' value='Comment' />
<input type='button' class='usr-interaction' data-action='like' value='Like' />
</div>
<div class="textpostFormat">
<p>Lorem ipsum dolor solit...etc #2</p>
<img />
<input type='button' class='usr-interaction' data-action='upvote' value='Upvote' />
<input type='button' class='usr-interaction' data-action='downvote' value='Downvote' />
<textarea cols=50 rows=5>Also a simple comment...</textarea>
<input type='button' class='usr-interaction' data-action='comment' value='Comment' />
<input type='button' class='usr-interaction' data-action='like' value='Like' />
</div>
<div class="textpostFormat">
<p>Lorem ipsum dolor solit...etc #3</p>
<img />
<input type='button' class='usr-interaction' data-action='upvote' value='Upvote' />
<input type='button' class='usr-interaction' data-action='downvote' value='Downvote' />
<textarea cols=50 rows=5>Guess what this is...</textarea>
<input type='button' class='usr-interaction' data-action='comment' value='Comment' />
<input type='button' class='usr-interaction' data-action='like' value='Like' />
</div>
</div>
Stripping all the hideous inline styles and replacing ID attributes with, in this case, simply data-id attributes to yield some example rendered markup like this below. This is NOT intended to be a final solution for you - you need to understand how you fit your functions within this because quite frankly the code given is chaotic.
within the click handler function if you supply the event as an argument to the function you can access event.target within the function. That event.target points to the element that initiated the click. From that point you can use DOM navigation techniques to find other nodes of interest.
document.querySelectorAll('.textpostFormat *[data-id]').forEach(n=>n.addEventListener('click',function(e){
switch( this.dataset.id ){
case 'textUpvoteImg':
changetextUpvote(e);
break;
case 'textDownvoteImg':
changetextDownvote(e)
break;
case 'makeComment':
textCommentClick(e);
break;
case 'textLike':
textLikeClick(e);
break;
}
}));
function changetextUpvote(e) {
alert(e.target)
}
function changetextDownvote(e) {
alert(e.target)
}
function textLikeClick(e) {
alert(e.target)
}
function textCommentClick(e) {
alert(e.target)
}
<div class='textpostFormat'>
<a href='profile.php'><img src='img/pfp.png' alt='pfp' class='textpostPFP'></a>
<div class='textinfo'><b>FIRSTNAME LASTNAME #1</b></div>
<img src='img/options.png' class='textpostOptions' />
<div class='textfeedbackBar'>
<div class='textratingBar'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
<a href='profile.php'><img src='img/pfp.png' alt='commentpfp' class='textcommentPFP' /></a>
<input type='text' name='textComment' class='textComment' data-id='textComment' placeholder='Write a comment' />
<p>PARAGRAPH - BODY CONTENT #1</p>
<div class='textPostData'>
<h4 data-id='textDataLikes'>0 Likes</h4>
<h4 data-id='textDataComments'>0 Comments</h4>
<h4 data-id='textDataReactions'>0 Reactions</h4>
</div>
<div>
<h2 class='textLike' data-id='textLike'><i class='fa fa-thumbs-up'></i> Like</h2>
<h2 class='makeComment' data-id='makeComment'><i class='fa fa-comment' style='margin-top: 2px;'></i> Comment</h2>
<h2 class='textReact' data-id='textReact'><i class='fa fa-smile' style='margin-top: 2px;'></i> React</h2>
<h2 class='textShare' data-id='textShare'><i class='fa fa-share' style='margin-top: 2px'></i> Share</h2>
</div>
<div>
<img class='textupvote' data-id='textUpvoteImg' src='img/upvote.png' alt='upvote' />
<img class='textdownvote' data-id='textDownvoteImg' src='img/downvote.png' alt='downvote' />
</div>
</div>
<div class='textpostFormat'>
<a href='profile.php'><img src='img/pfp.png' alt='pfp' class='textpostPFP'></a>
<div class='textinfo'><b>FIRSTNAME LASTNAME #2</b></div>
<img src='img/options.png' class='textpostOptions' />
<div class='textfeedbackBar'>
<div class='textratingBar'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
<a href='profile.php'><img src='img/pfp.png' alt='commentpfp' class='textcommentPFP' /></a>
<input type='text' name='textComment' class='textComment' data-id='textComment' placeholder='Write a comment' />
<p>PARAGRAPH - BODY CONTENT #2</p>
<div class='textPostData'>
<h4 data-id='textDataLikes'>0 Likes</h4>
<h4 data-id='textDataComments'>0 Comments</h4>
<h4 data-id='textDataReactions'>0 Reactions</h4>
</div>
<div>
<h2 class='textLike' data-id='textLike'><i class='fa fa-thumbs-up'></i> Like</h2>
<h2 class='makeComment' data-id='makeComment'><i class='fa fa-comment' style='margin-top: 2px;'></i> Comment</h2>
<h2 class='textReact' data-id='textReact'><i class='fa fa-smile' style='margin-top: 2px;'></i> React</h2>
<h2 class='textShare' data-id='textShare'><i class='fa fa-share' style='margin-top: 2px'></i> Share</h2>
</div>
<div>
<img class='textupvote' data-id='textUpvoteImg' src='img/upvote.png' alt='upvote' />
<img class='textdownvote' data-id='textDownvoteImg' src='img/downvote.png' alt='downvote' />
</div>
</div>
I have two divs with forms in them and I want to be able to have a selector and switch between the two. Whitch I have, and it kind of works. If you go to my JSFiddle and switch between the divs a few times you will see what I'm talking about.
here's my JSFiddle: https://urlzs.com/fN6YY
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
.input_style {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border-radius: 10px;
border-color: #000000;
border-style: solid;
background-color: #FFFFFF;
margin: 10px 0;
}
.myform {
width: 720px;
background-color: #ffff4d;
border-radius: 20px;
padding: 20px;
position: relative;
left: 60px;
top: 40px;
align: center;
}
.text {
font-family: "Goudy Old Style", serif;
font-size: 125%;
font-weight: 550;
display: inline;
margin: 15px;
}
.center {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div style="position: relative">
<div class="container blue box" style="padding: 0; margin: 0;">
<form class="myform" method="post">
<h1 class="center">Square Root</h1>
<p style="display: inline;" class="text">Select:</p>
<select class="input_style">
<option value="blue">Square Root</option>
<option value="red">Exponents</option>
</select>
<p style="display: inline;" class="text">Square Root:</p>
<input class="input_style" type="text" placeholder="Enter the
Number" name="number_1">
<input class="input_style submit" type="submit"
value="Calculate" name="square_root">
</form>
</div>
<div class="container red box" style="padding: 0; margin: 0;">
<form class="myform" method="post">
<h1 class="center">Exponents Calculator</h1>
<p style="display: inline;" class="text">Select:</p>
<select class="input_style">
<option value="red">Exponents</option>
<option value="blue">Square Root</option>
</select>
<p style="display: inline;" class="text">Number:</p>
<input class="input_style" type="text" placeholder="Enter the
Number" name="number_2">
<p style="display: inline;" class="text">Exponent:</p>
<input class="input_style" type="text" placeholder="Enter the
Exponent" name="exponent">
<input class="input_style submit" type="submit"
value="Calculate" name="exponent">
</form>
</div>
</div>
I would like it to switch between the different divs seamlessly.
Thanks A Lot!
you should set the dropdown value also when you switch.
$('select').val(optionValue);
updated Jsfiddle: https://jsfiddle.net/5Lyn4dro/
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
$('select').val(optionValue);
});
}).change();
});
.input_style {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
border-radius: 10px;
border-color: #000000;
border-style: solid;
background-color: #FFFFFF;
margin: 10px 0;
}
.myform {
width: 720px;
background-color: #ffff4d;
border-radius: 20px;
padding: 20px;
position: relative;
left: 60px;
top: 40px;
align: center;
}
.text {
font-family: "Goudy Old Style", serif;
font-size: 125%;
font-weight: 550;
display: inline;
margin: 15px;
}
.center {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position: relative">
<div class="container blue box" style="padding: 0; margin: 0;">
<form class="myform" method="post">
<h1 class="center">Square Root</h1>
<p style="display: inline;" class="text">Select:</p>
<select class="input_style">
<option value="blue">Square Root</option>
<option value="red">Exponents</option>
</select>
<p style="display: inline;" class="text">Square Root:</p>
<input class="input_style" type="text" placeholder="Enter the Number" name="number_1">
<input class="input_style submit" type="submit" value="Calculate" name="square_root">
</form>
</div>
<div class="container red box" style="padding: 0; margin: 0;">
<form class="myform" method="post">
<h1 class="center">Exponents Calculator</h1>
<p style="display: inline;" class="text">Select:</p>
<select class="input_style">
<option value="blue">Square Root</option>
<option value="red">Exponents</option>
</select>
<p style="display: inline;" class="text">Number:</p>
<input class="input_style" type="text" placeholder="Enter the Number" name="number_2">
<p style="display: inline;" class="text">Exponent:</p>
<input class="input_style" type="text" placeholder="Enter the Exponent" name="exponent">
<input class="input_style submit" type="submit" value="Calculate" name="exponent">
</form>
</div>
</div>
You could use CSS animations to obtain a seamless transition.
When the corresponding selector is selected , change the display property of the div.
Example:
display:block /*When div is needed*/
display:none /*When div is not needed*/
You could further use the CSS transition property to add the desired timings.
Another option would be to use custom CSS animations using the #keyframes property.
Using this will also enable you to have a animation timing function.
If you want to use Javascript as well , this article might help you :
https://css-tricks.com/controlling-css-animations-transitions-javascript/
I have created a tab section without using Jquery UI. Now I have to set some condition on it.
1) If the user already logged in then the first tab will hide and directly jump to the second tab.
2) I have to disabled next tab until and unless the user does not field all the details in the current tab content.
Would you help me in this?
$(document).ready(function() {
$(".tab_target a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("active_tab");
$(this).parent().siblings().removeClass("active_tab");
var tab = $(this).attr("href");
$(".tab_inside").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
body{
margin: 0;
padding: 0;
}
.tab_section{
width: 700px;
margin: 0 auto;
}
.tab_section ul.tab_target{
position: relative;
display: block;
list-style: none;
padding: 0;
clear: both;
/*background: #f8f8f8;*/
}
.tab_section ul.tab_target li{
display: inline-block;
margin: 10px;
}
.tab_section ul.tab_target li a{
padding: 06px 45px;
border: 1px solid #ccc;
text-decoration: none;
}
.tab_section ul.tab_target li a:hover{
color: #fff;
background-color: #00a63f;
}
.border{
border:1px solid #ccc;
}
.tab_inside
{
padding: 20px 30px;
box-sizing: border-box;
display: none;
}
.tab_inside form .text-fields{
padding: 20px 0;
}
.tab_target li.active_tab {
position: relative;
background-color: #fff;
border-bottom: 1px solid #fff;
z-index: 5;
}
#tab1 {
display: block;
}
.all_tab {
border: 1px solid #d4d4d1;
background-color: #fff;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<?php session_start(); ?>
<div class="tab_section">
<ul class="tab_target">
<li class="active_tab">Demo1</li>
<li>Demo2</li>
<li>Demo3</li>
<li>Demo4</li>
</ul>
<div class="all_tab">
<?php if (!isset($_SESSION['username'])) {?>
<div id="tab1" class="border tab_inside">
<h2>Demo1</h2>
<form action="#" method="post">
<div class="text-fields">
<label>username</label>
<input type="text" name="username">
</div>
<div class="text-fields">
<label>Password</label>
<input type="password" name="password">
</div>
<input type="submit" name="submit" value="submit">
</form>
</div><!--tab1-->
<?php
} ?>
<div id="tab2" class="border tab_inside hide_tab">
<h2>Demo2</h2>
<form action="#" method="post">
<div class="text-fields">
<label>Email </label>
<input type="email" name="email">
</div>
<div class="text-fields">
<label>Mobile no</label>
<input type="text" name="mobile">
</div>
<input type="submit" name="submit" value="submit">
</form>
</div><!--tab2-->
<div id="tab3" class="border tab_inside">
<h2>Demo3</h2>
<form action="#" method="post">
<div class="text-fields">
<label>Address</label>
<textarea name="address"></textarea>
</div>
<div class="text-fields">
<label>Address2</label>
<textarea name="address2"></textarea>
</div>
<input type="submit" name="submit" value="submit">
</form>
</div><!--tab4-->
<div id="tab4" class="border tab_inside">
<h2>Demo4</h2>
<h2>Success</h2>
</div><!--tab4-->
</div><!--all_tab-->
</div>
for me i will use php direct jump to second tab
or u can set a var in js by php to control jump or not jump
not sure help or not
if u load all the page together
<?php
$session=2;// example of session data value
?>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script>
$(function()
{
$("[name='dv']").css("display","none");
<?php
if(isset($session))
echo"$('#d2').css('display','');";
else
echo"$('#d1').css('display','');";
?>
});
</script>
<form>
<div id="d1" name="dv">
reg page
</div>
<div id="d2" name="dv">
tab 2
</div>
</form>
if u load the page one by one
<?php
$session=2;// example of session data value
?>
<form>
<?php if(isset($session))
{?>
<div id="d1" name="dv">
reg page
</div>
<?php }
else
{
?>
<div id="d2" name="dv">
tab 2
</div>
<?php }?>
</form>
not sure what u want , sorry
my English is too poor
I'm trying to add a mailchimp form hosted in another domaine to my new page and i can submit my subscription only if I turn off javascript ?
i don't know why and in which situation this problem happen ?
Because my form works perfectly here.
The code
(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[8]='MMERGE8';ftypes[8]='text';fnames[3]='MMERGE3';ftypes[3]='text';fnames[4]='MMERGE4';ftypes[4]='text';fnames[5]='MMERGE5';ftypes[5]='text';fnames[6]='MMERGE6';ftypes[6]='text';fnames[7]='MMERGE7';ftypes[7]='text';}(jQuery));var $mcj = jQuery.noConflict(true);
<link href="http://cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup { background:#fff; clear:left; }
#mc_embed_signup form { padding: 20px 0px 0px 0px }
#mc_embed_signup .button {
border-radius:0px!important;
background:#fff;
color:#282828;
padding: 15px 0px 0px 0px;
height: 50px;
font-size: 11px;
}
#mc_embed_signup .button:hover { background:#fff; color:#d2c6af; }
#mc_embed_signup .mc-field-group input {
border-radius:0px!important;
border-top:0px!important;
border-left:0px!important;
border-right:0!important;
border-bottom: 1px solid #ccc;
max-width:250px!important;
}
#mc_embed_signup .mc-field-group input:focus {
border-bottom: 1px solid #282828;
}
#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
font-size: 11px; margin: 0px 0 0em 0;padding: 5px 0px;
}
</style>
<div id="mc_embed_signup">
<form action="http://www.domaine.us2.list-manage.com/subscribe/post?u=67c8e1302463c1a5125704ad4&id=0e0ead4532" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="indicates-required"></div>
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email*">
</div>
<div class="mc-field-group">
<input type="text" value="" name="MMERGE8" class="" id="mce-MMERGE8" placeholder="Last Name">
</div>
<div class="mc-field-group">
<input type="text" value="" name="MMERGE3" class="" id="mce-MMERGE3" placeholder="Country">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_67c8e1302463c1a5773704ad4_0e0eaf4632" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe →" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</form>
</div>
<script type='text/javascript' src='http://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
Instead of using Simulator try to run it in your browser(especially google chrome) and go
right click->inspect element->console tab
here you can see the errors and its line number
I would like to add the green label to the input field like the following picture. It is one day I am trying different methods but I could not do it yet.
any ideas!!!
I am using bootstrap responsive to design the page layout. The shadow is okay not, only the problem is the label.
<div class="row-fluid">
<div class="span12" align="center">
<div class="row-fluid">
<div class="span2"></div>
<div class="span4">
<input type="text" class="form-control" name="name" placeholder="Nome"/>
</div>
<div class="span4">
<input type="text" class="form-control" name="Family" placeholder="Cognome"/>
</div>
<div class="span2"></div>
</div>
</div>
</div>
Since you're using Bootstrap as your CSS framework, you can achieve this by customizing the input-group-addon class.
Read more about it: http://getbootstrap.com/components/#input-groups
HTML:
<div class="container">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<div class="square"></div>
</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
CSS:
.input-group-addon{
border: 0px !important;
background: transparent !important;
position: absolute !important;
top: 4px !important;
left: -19px !important;
z-index: 9999 !important;
}
.square{
width:15px!important;
height:15px!important;
background: green!important;
}
Demo
You can just add :before pseudo-element on parent div because input can not contain other elements. Here is another Example.
input {
padding: 10px 20px;
border: 1px solid #D0D1D2;
box-shadow: 0px 5px 5px 0px #DAD9E0;
}
.element {
position: relative;
}
.element:before {
position: absolute;
content: '';
width: 10px;
height: 10px;
background: #00E09E;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
}
<div class="element">
<input type="text" placeholder="Some Text">
</div>