CODEWITHSUNDEEP
javascriptjqueryhtmlcsscookies
Randall
Randall

Reputation: 2858

Change the clicked element and save it in cookies

$(document).ready(function(){
    $(".link").click(function(){  // when .link clicked 
        $(".elem").toggle(); // toggle .elem visibility 
    });
});
jQuery(function($){
	$(document).mouseup(function (e){ 
		var div = $(".link"); 
		var second = $('.elem');
		var close = $('.close');
		if (!div.is(e.target) 
		    && (second.has(e.target).length == 0 || close.is(e.target))) {  
			second.hide(); 
		}
	});
});
.wrapper {
	width: 1180px;
	margin-right: auto;
	margin-left: auto;
}

.elem {
	display:none;
	margin-top: 14px;
	width: 480px;
	height: 310px;
	background-color: grey;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	position: relative;
	box-shadow:0 2px 3px rgba(0,0,0,0.5);
	transition: 0.4s;
}
.elem:after {
	content: '';
	position: absolute;

	width: 0;
	height: 0;
	border-bottom: 10px solid grey;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;

	top: -10px;
	left: 33px;

}
.title {
	margin: 0px 0px 10px 10px;
	padding-top: 15px;
	position: relative;
}
.link {
	margin-left: 13px;
}
.regions {
	height: 50px;
	display: inline-block;
}
.floating {
	display: inline-block;
	margin: 10px;
	line-height: 0.4;
	width: 20px;

}
a.floating {
	text-decoration: none;
	width: 24%;
}
a.floating:hover {
	text-decoration: underline;
}
.otherregion {
	margin: 0px 0px 10px 10px;
	padding-top: 15px;
}
.edit {
	border:1px solid #9E9E9E;
    color: #000000;
    padding: 3px;
    font-size: 14px;
    font-family: Verdana;
    background: #FFF;
    width: 90%;
    height: 23px;
}
form {
	margin: 0px 0px 10px 10px;
}
.formtext {
	margin: 0px;
	padding-top: 2px;
}
.top {
	margin-left: 13px;
	margin-right: 38px;
}
.close {
	margin: -27px 0px 20px 444px;
	position: absolute;
	font-size: 18px;
	cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title>new project</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<div class="wrapper">
	<a class="link" href="#">S.T.E.A.M. lab</a>
	<div class="elem">
		<p class="title">Choose youre hobby</p><a class="close">X</a>
		<div class="regions">	
			<a class="floating" href="#">Math</a>
			<a class="floating" href="#">Art</a>
			<a class="floating" href="#">Science</a>
			<a class="floating" href="#">Technology</a>
			<a class="floating" href="#">Engineering</a>
		</div>
		<p class="otherregion">Or choose another one:</p>
		<form>
			<input class="edit" type="text" name="add" placeholder="write some text bro">
		</form>
		<div class="top">bla bla bla bla bla :
		<p class="formtext">		&#8226 </p>
		<p class="formtext"> 		&#8226 .</p></div>
	</div>
</div>
</body>
</html>

Hi everyone.This is my simple window.Already 3 days im struggling to change S.T.E.A.M. lab text to other text from floating class which one is clicked.And if its possible save this result in cookie.more details more details more details more details (sorry this is for stackoverflow they neeed more details )

Upvotes: 0

Views: 74

Answers (2)

Jaya
Jaya

Reputation: 3911

Step 1 : Add a click event to the a tag under regions.

Step 2 : On this click event handler get the inner text of the clicked element which is the subject - and store in a variable for display and to be stored in a cookie.

Step 3: Write a cookie save function that takes a string parameter and which is called on step 2 , pass in the subject name to be saved in the cookie.

 $("body").on("click" "div.regions a", function(e) {
     // Your code here that fetches the event.target.innertext or some such
    var txt = $(e.target).text(); // sample code not tested
    SetCookie(txt);
    SetStemLabText(txt) 
});

 SetCookie(txt) {
  $.cookie("Subject", text);
 }

 SetStemLabText(txt) {
  $('.link').text(txt)
 }

Upvotes: 0

Marouen Mhiri
Marouen Mhiri

Reputation: 1667

You have to add a click listener to your floating Elements and save the text to link. For setting cookie I used hier vanilla JS, but you can use this https://github.com/carhartl/jquery-cookie too

$(document).ready(function(){
    $(".link").click(function(){  // when .link clicked 
        $(".elem").toggle(); // toggle .elem visibility 
    });
    $('.floating').click(function(evt){
        evt.preventDefault();
        $('.link').text(event.target.textContent);
        // document.cookie = "cookiename=event.target.textContent";  
    });
});
jQuery(function($){
	$(document).mouseup(function (e){ 
		var div = $(".link"); 
		var second = $('.elem');
		var close = $('.close');
		if (!div.is(e.target) && (second.has(e.target).length == 0 || close.is(e.target))) {  
			second.hide(); 
		}
	});
});
.wrapper {
	width: 1180px;
	margin-right: auto;
	margin-left: auto;
}

.elem {
	display:none;
	margin-top: 14px;
	width: 480px;
	height: 310px;
	background-color: grey;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	position: relative;
	box-shadow:0 2px 3px rgba(0,0,0,0.5);
	transition: 0.4s;
}
.elem:after {
	content: '';
	position: absolute;

	width: 0;
	height: 0;
	border-bottom: 10px solid grey;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;

	top: -10px;
	left: 33px;

}
.title {
	margin: 0px 0px 10px 10px;
	padding-top: 15px;
	position: relative;
}
.link {
	margin-left: 13px;
}
.regions {
	height: 50px;
	display: inline-block;
}
.floating {
	display: inline-block;
	margin: 10px;
	line-height: 0.4;
	width: 20px;

}
a.floating {
	text-decoration: none;
	width: 24%;
}
a.floating:hover {
	text-decoration: underline;
}
.otherregion {
	margin: 0px 0px 10px 10px;
	padding-top: 15px;
}
.edit {
	border:1px solid #9E9E9E;
    color: #000000;
    padding: 3px;
    font-size: 14px;
    font-family: Verdana;
    background: #FFF;
    width: 90%;
    height: 23px;
}
form {
	margin: 0px 0px 10px 10px;
}
.formtext {
	margin: 0px;
	padding-top: 2px;
}
.top {
	margin-left: 13px;
	margin-right: 38px;
}
.close {
	margin: -27px 0px 20px 444px;
	position: absolute;
	font-size: 18px;
	cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
	<title>new project</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<div class="wrapper">
	<a class="link" href="#">S.T.E.A.M. lab</a>
	<div class="elem">
		<p class="title">Choose youre hobby</p><a class="close">X</a>
		<div class="regions">	
			<a class="floating" href="#">Math</a>
			<a class="floating" href="#">Art</a>
			<a class="floating" href="#">Science</a>
			<a class="floating" href="#">Technology</a>
			<a class="floating" href="#">Engineering</a>
		</div>
		<p class="otherregion">Or choose another one:</p>
		<form>
			<input class="edit" type="text" name="add" placeholder="Начните вводить название">
		</form>
		<div class="top">bla bla bla bla bla :
		<p class="formtext">		&#8226 </p>
		<p class="formtext"> 		&#8226 .</p></div>
	</div>
</div>
</body>
</html>

Upvotes: 1

Related Questions