I want to change color of icon in header from some button click.
I was able to put some color on icon using below CSS: #myhead:after {
background-color: #ff4d4d;
}
But i am not able to change its color from some button click.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
/* #id Products */
#myhead:after {
background-color: #ff4d4d;
}
</style>
<script>
function changecolor()
{
$('#myhead:after').css("background-color", "green");
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class=" ui-icon-circle ui-alt-icon ui-btn-icon-right " id="myhead">
<h3>Filter</h3>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>
You can't manipulate css:after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. So you need to create custom circle icon.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
.change-color {
background-color: #ff4d4d;
border-radius: 50%;
width: 20px;
height: 20px;
float: right;
margin: -30px 10px 0px 0px;
}
</style>
<script>
function changecolor() {
$('#myhead').css('background-color', 'green');
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class="">
<h3>Filter</h3>
<div class="change-color" id="myhead"></div>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>
Change the CSS as below
#myhead h3 {
background-color: #ff4d4d;
}
And change the JS as below
$('#myhead h3').css('background-color', 'green');
Related
I have 3 games in this current code, I got the first 2 to work but the third has been elusive. I would like to have it all run simultaneously but it doesn't have to. The last 2 games are from the same compiler. These are interactive games like crosswords and word searches. Also, I'm new to js, I'm still learning. Here's my code.
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META NAME="Generator" CONTENT="Crossword Compiler (www.crossword-compiler.com)">
<br></br>
<center><p style="font-size:20px">Word Match Game</p></center>
<br></br>
<link rel="stylesheet" href="/s/style.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="/s/mayavocabagjQtest.js"></script>
</head>
<body>
<div id="cardslots">
<div id="draggableBlocks"></div>
<div id="targetArea"></div>
<div id="message">Match!</div>
<div id="successMessage">Success!</div>
</div>
</body>
<br></br>
<br></br>
<center><p style="font-size:20px">Crossword Puzzle</p></center>
<br></br>
<TITLE>Crossword Puzzle</TITLE>
<br></br>
<style type="text/css">
<!--
BODY, .Clues, .GridClues { font-size: -3pt; font-family: Times New Roman,Times; }
-->
</style>
<STYLE TYPE="text/css">
<!--
div#CrosswordCompilerPuz {
position: fixed;
transform: scale(1.4);
left: 22%;
width: 700px; // Any width will be fine
height: 700px; // Any height will be fine
}
.PuzTitle {
font-size: 15pt; color: #800000; font-weight: bold;
}
.CopyTag {
font-size: 10pt; color: #000000
}
-->
</STYLE>
<TITLE>Crossword Puzzle</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#ffffff">
<script src="/s/raphael.js"></script>
<script src="/s/crosswordCompiler.js"></script>
<script src="/s/mayaagcw.js"></script>
<script>
$(function(){
$("#CrosswordCompilerPuz").CrosswordCompiler(CrosswordPuzzleData,null, {SUBMITMETHOD:"POST",SUBMIT : "",PROGRESS : "" , ROOTIMAGES: "CrosswordCompilerApp/CrosswordImages/" } );});</script>
<div id="CrosswordCompilerPuz"></div>
<center><P><BLOCKQUOTE><A CLASS="PDFURL" HREF="testcwp.pdf">PDF</A></BLOCKQUOTE></center>
<HR>
<SPAN CLASS="CopyTag">Web page created by Crossword Compiler.</SPAN>
</BODY>
<BODY>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta NAME="Generator" CONTENT="Crossword Compiler (www.crossword-compiler.com)">
<style type="text/css">
<!--
BODY, .Clues, .GridClues { font-size: -3pt; font-family: Times New Roman,Times; }
-->
</style>
<STYLE TYPE="text/css">
<!--
div#CrosswordCompilerPuz1 {
position: fixed;
transform: scale(1.0);
left: 22%;
width: 700px; // Any width will be fine
height: 700px; // Any height will be fine
}
.PuzTitle {
font-size: 15pt; color: #800000; font-weight: bold;
}
.CopyTag {
font-size: 10pt; color: #000000
}
-->
</STYLE>
<TITLE>Wordsearch</TITLE>
</BODY>
<BODY TEXT="#000000" BGCOLOR="#ffffff">
<script src="/s/raphael.js"></script>
<script src="/s/crosswordCompiler.js"></script>
<script src="/s/1.js"></script>
<script>
$(function(){ $("#CrosswordCompilerPuz1").CrosswordCompiler(CrosswordPuzzleData,null, {SUBMITMETHOD:"POST",PROGRESS : "" , ROOTIMAGES: "CrosswordCompilerApp/CrosswordImages/" } );});</script>
<div id="CrosswordCompilerPuz1"></div>
<HR>
</BODY>
</HTML>
any input is appreciated
Been trying to create a simple "squad builder", basically just creating a list as different buttons are clicked. I noticed Jquery was not working, although it has been linked to in the section. I can't even access basic animations. What is going on in here?:
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<head>
<title>Squad Builder</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("button").addClass("animated bounce");
});
</script>
<style type="text/css">
#player-box {
background-color: red;
height: 500px;
width: 130px;
}
#squad-box {
background-color: red;
height: 500px;
width: 500px;
margin-left: 10px;
}
</style>
<body>
<div class = "row container-fluid">
<div id = "player-box" class = "col-md-6">
<ul id = "player-list">
<li><button class = "player-btn btn">Player1</button></li>
</ul>
</div>
<div id = "squad-box" class = "col-md-6">
<ul id = "squad-list">
</ul>
</div>
</div>
</body>
Your code is ok, probably is only missing the animate.css assets:
animate.css
$(document).ready(function() {
$("button").addClass("animated bounce");
});
#player-box {
background-color: red;
height: 500px;
width: 130px;
}
#squad-box {
background-color: red;
height: 500px;
width: 500px;
margin-left: 10px;
}
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet" />
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="row container-fluid">
<div id="player-box" class="col-md-6">
<ul id="player-list">
<li><button class="player-btn btn">Player1</button></li>
</ul>
</div>
<div id="squad-box" class="col-md-6">
<ul id="squad-list">
</ul>
</div>
</div>
My jQuery .resizable is not working.
It gives error :
TypeError: $(...).resizable is not a function ;
My code is:
<html>
<head>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="httpS://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#main").resizable("enable");
});
</script>
</head>
<body>
<div class="main" id="main">
<div class="header"></div>
<div class="innerMain">
<div class="content"></div>
</div>
</div>
</body>
</html>
This snippet is working.
Look for the CDNs used here... And look for the order to load them too.
$("#main").resizable();
#main{
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div class="header"></div>
<div class="innerMain">
<div class="content">
You can resize me!
</div>
</div>
</div>
You might be missing jquery ui css and js :
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Add jquery-ui.js library and remove enable from resizable function
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#main" ).resizable();
} );
</script>
<html>
<head>
<meta charset="utf-8">
<title>resizable</title>
<!--div is used to style block element,span are used to group inline elements-->
<style>
.bluebox{
background-color:#415E9B;
font-size: 20px;
color: white;
height: auto;
}
.blackbox{
background-color: #0C0C0C;
font-size: 20px;
color: white;
height: 100px;
}
.greybox{
background-color:rgb(161, 54, 165);
font-size: 20px;
color: white;
height: 100px;
}
.great{
background-color: yellowgreen;
color: teal;
}
.news{
background-color:palevioletred ;
columns: auto 1px;;
height: auto;
}
.org{
background-color: peru;
color:red;
height: auto;
}
#fb{
border:1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="bluebox" id="fb">
<p>facebook is <span class="great">great</span></p></div>
<div class="blackbox">
<p>BBC is a <span class="news">> newschannel</span></p></div>
<div class="greybox">
<p>UEFA is a football<span class="org">organization</span></p></div>
<script>
$(function(){
$("#fb").resizable({
maxheight : 200,
maxwidth : 300,
minheight: 50,
minwidth:50
});
});
</script>
</body>
</html>
we have to check the sequence of our cdns:
correct sequence:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<linkrel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
i was doing the opposite putting jquery-ui above jquery.min ...
issue is resolved now
I am using bootsrap in my html .I want to change the background color of my div when screen resolution change from large to medium or small .I added class but it not reflect when i change my screen resolution .Here is my code
http://plnkr.co/edit/6sSYngN0hn2tZZ1wDEML?p=preview
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<style>
.col-lg-12{
height: 50px;
background: red !important;
}
.col-md-12{
height: 50px;
background: yellow !important;
}
.col-xs-12{
height: 50px;
background: black !important;
}
.col-sm-12{
height: 50px;
background: blue !important;
}
</style>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
hi
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
it wasn't working because you defined your CSS properties without media-queries. as all the classes were added to a common DIV, the CSS property with highest specificity was getting applied.
Below is the solution to make it work.
#media (max-width: 767px) {
.col-xs-12 {
height: 50px;
background: black !important;
}
}
#media (min-width: 768px) {
.col-sm-12 {
height: 50px;
background: blue !important;
}
}
#media (min-width: 992px) {
.col-md-12 {
height: 50px;
background: yellow !important;
}
}
#media (min-width: 1200px) {
.col-lg-12 {
height: 50px;
background: red !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
hi
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
I'm looking for option how to comparison id in draggable&dropabble elements. It's my first journey with jquery.
Actually I have (fragments):
$(".letter").draggable();
$(".simpleSlot").droppable({
drop: function( event, ui ) {
var idDrag = ui.draggable.attr("id");
var idDrop = $this.attr("id");
$("#TEST").text("idDrag:" + idDrag + "; idDrop:" + idDrop);
if(idDrag == idDrop){ alert("Done!"); }
}
});
Droppable element:
var letter = $("<div class=\"letter\" id=\""+divId+"\"></div>").text(splitedWord[i]);
$("#divId").css({
left: positionX, top: positionY
});
$("#mixedWord").append(letter);
Draggable element is generated the same way.
And my css for droppable:
.letter{
border: 2px solid;
border-radius: 25px;
width: 50px;
height: 50px;
font-size: 30px;
text-align: center;
position: absolute;
}
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="js/flipclock/libs/prefixfree.min.js"></script>
<script src="js/flipclock/flipclock.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
</head>
<body>
<div id="area">
<div id="time">Time:</div>
<div id="mixedWord"><!--here goes random word as simple letters in simple divs--> </div>
<div id="slots"></div>
<div id="height"></div>
<div id="width"></div>
</div>
</body>
MY PROBLEMS:
Draggable works. But when I drop something on droppable element - I can't move it more. It cannot be that.
It doesn't change #TEST - so it means drop doesn't work. Why?
And I don't have alert.