How to make a div appear on timer and disappear on click? - javascript

I am trying to complete my first project and I am new to JavaScript, I'm trying to have a div appear on the page after X amount of seconds and disappear on click and to have it loop, so if some one opens it, the div appears after the timer, on click and it disappears, and it will appear again after the timer again. I've tried #keyframes animations but they only make my div disappear. I am also doing this on codepen, so some answers might not work (I think) . I also have tried using JavaScript but to no avail, so I have been taking lessons on free code camp.org, but it is only teaching me basic JavaScript. Finally I'm gonna post a link to my pen for you guys to check out below. I'll take any constructive criticism,
as it is my first project. Sorry for the multiple edits, I've never asked a community for help before.
body {
background-image: url("https://drive.google.com/uc?export=view&id=1drQkb0PbVE2iJKPIIdt6zk8DYoICjfDQ");
background-attachment:fixed;
background-size:cover;
background-position: center;
background-repeat:no-repeat;
background-color:#000000;
margin:unset !important;
font-family:arial;
}
.fireteam{
font-size:16px;
color:white;
}
#fireteam{
position:absolute;
display:block;
top:-20px;
right:231px;
}
#emblem{
height:72px;
width:321px;
position:absolute;
padding:1px 10px 1px 10px;
right:80px;
top:30px;
border-top: 2px solid white;
background: linear-gradient(304deg, #ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple,#ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple, #ff0000, red, #ffa500, orange, #ffff00, yellow, #008000, green, #0000ff,blue, #800080, purple);
background-size: 777% 777%;
-webkit-animation: AnimationName 70s ease infinite;
-moz-animation: AnimationName 70s ease infinite;
animation: AnimationName 70s ease infinite;
}
#-webkit-keyframes AnimationName {
0%{background-position:0% 5%}
50%{background-position:100% 96%}
100%{background-position:0% 5%}
}
#-moz-keyframes AnimationName {
0%{background-position:0% 5%}
50%{background-position:100% 96%}
100%{background-position:0% 5%}
}
#keyframes AnimationName {
0%{background-position:0% 5%}
50%{background-position:100% 96%}
10
}
.user-name{
font-size:21px;
color:white;
font-weight:bold;
}
#user-name{
display:block;
position:relative;
margin-left:65px;
margin-top:6px
}
.power-level {
font-size:25px;
color:yellow;
position:relative;
font-weight:bold;
}
#power-level{
margin:0px 0px 0px 0px;
display:inline-block;
position:absolute;
right:6px;
bottom:42px;
}
.clan-name {
font-size:17px;
color:white;
font-family:italic;
}
#clan-name{
display:inline-block;
position:relative;
margin-top:0px;
margin-left:66px;
}
.ghost {
position:relative;
width:42px;
height:auto;
display:inline-block;
}
#ghost{
display:inline-block;
position:absolute;
top:13px;
left:24px;
}
.pl-icon{
position:relative;
width:10px;
height:auto;
display:inline-block;
}
#pl-icon{
margin:0px 0px 0px 0px;
display:inline-block;
position:absolute;
right:62px;
top:5px;
}
.triangle{
position:relative;
width:30px;
height:auto;
}
#triangle{
padding: 0px 0px 0px 0px;
Display:inline-block;
position:absolute;
top:0px;
left:0px;
}
.jumpship{
height:470px;
width:auto;
}
#jumpship{
display:inline-block;
position:absolute;
left:410px;
top:150px;
z-index:-1;
animation-name: floating;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, -0px); }
}
#main {
border-top: 9px solid #FF5952;
height:150px;
margin:265px 0 0 0;
width:100%;
pointer-events: none;
z-index:1;
}
#main {
animation: cssAnimation 0s 7s forwards;
opacity: 0;
}
#keyframes cssAnimation {
to { opacity: 1; }
}
#icon-holder {
background-color:#3B4956;
width:35%;
height:150px;
opacity:0.8;
display:inline-block;
}
.point{
position:relative;
width:111px;
height:auto;
float:right;
padding:3px 12px 0 0;
}
#title {
height:75px;
width:65%;
backdrop-filter:blur(4px);
display:inline-block;
position:absolute;
}
#title::before{
content: "";
background-image: url("https://drive.google.com/uc?export=view&id=1lAegDNv9UA3tunXylxrW5Loomz3X2cEA");
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity:0.7;
}
.title {
font-size:39px;
color:white;
font-weight:bold;
text-align:left;
position:relative;
display:inline-block;
top:15px;
left:10px;
opacity:1;
padding-left:15px;
}
#message {
height:75px;
width:65%;
position:absolute;
backdrop-filter:blur(4px);
display:inline;
top:349px;
background-size:cover;
}
#message::before{
content: "";
background-image: url("https://drive.google.com/uc?export=view&id=1A38rtfR8GbdVW3R98E6PEQRRlZdBqQ6j");
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.7;
}
.message{
font-size:21px;
color:white;
text-align:right;
position:relative;
display:inline-block;
top:18px;
left:10px;
padding-left:15px;
}
#basement {
background-image: url("https://drive.google.com/uc?export=view&id=1wpkpK5n7Msvr4uqMme7Uk55HPOJx05H9");
height:25px;
width:100%;
bottom:3px;
padding:1px;
position:relative;
text-align:left;
}
#basement {
animation: cssAnimation 0s 7s forwards;
opacity: 0;
}
#keyframes cssAnimation {
to { opacity: 1; }
}
.dismiss {
font-size:18px;
color:white;
display:inline-block;
}
#dismiss{
position:relative;
display:inline-block;
bottom:9px;
float:center
}
.icon {
width:42px;
height:auto;
display:inline-block;
float:center;
}
#icon{
display:inline-block;
position:relative;
width:65%;
float:right;
bottom:1px;
}
.director{
font-size:21px;
color:white;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid white;
border-bottom: 2px solid white;
padding:4px 50px 4px 50px;
position:relative;
}
#director{
width:280px;
position:relative;
float:right;
bottom:-130px;
right:-370px;
}
#director::before {
content: "";
background-image:url("https://drive.google.com/uc?export=view&id=1wpkpK5n7Msvr4uqMme7Uk55HPOJx05H9");
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.65;
filter:blur(6px);
}
.friends{
font-size:16px;
color:white;
border-right: 1px solid white;
padding:0px 15px 0px 0px;
}
#friends{
width:167px;
position:absolute;
display:inline-block;
float:right;
bottom:20px;
right:285px;
}
.invite{
font-size:16px;
color:white;
}
#invite{
width:150px;
position:absolute;
display:inline-block;
float:right;
bottom:20px;
right:132px;
}
.menu{
font-size:16px;
color:white;
}
#menu{
width:150px;
position:absolute;
display:inline-block;
float:right;
bottom:20px;
right:-2px;
}
.icon2{
width:17px;
height:auto;
display:inline-block;
float:left;
margin-right:10px;
}
.icon3{
width:17px;
height:auto;
display:inline-block;
float:left;
margin-right:7px;
}
.icon4 {
width:17px;
height:auto;
display:inline-block;
float:left;
margin-right:7px;
}
<body>
</script>
<div id="emblem">
<div id="fireteam"> <span class="fireteam">F I R E T E A M</span>
</div>
<div id="triangle"> <img class="triangle" src="https://drive.google.com/uc?export=view&id=1PdfKbElHGA0zYoX3uU97dBMJcQRbLmOf">
</div>
<div id="ghost"> <img class="ghost" src="https://drive.google.com/uc?export=view&id=1imBPZyD5tG5J6zP1OyP0D23c5IvSDT2a">
</div>
<div id="user-name"> <span class="user-name"> prince_of_war04</span>
</div>
<div id="clan-name"> <span class="clan-name">Nerf600autos</span>
</div>
<div id="pl-icon"> <img class="pl-icon" src="https://drive.google.com/uc?export=view&id=1bat6pZthPyIotmXi8dcDfLChVTKYlnZY">
</div>
<div id="power-level"> <span class="power-level">1078</span>
</div>
</div>
<div id="jumpship">
<img class="jumpship" src="https://drive.google.com/uc?export=view&id=1W9RVvJq0NBokWZ3u4L6x1QKbMfH6IJUW">
</div>
<div id="main">
<div id="icon-holder">
<img class="point" src="https://drive.google.com/uc?export=view&id=1X2QpP_a_1-CS8doBZQ9F6Ll-_3llmOsR">
</div>
<div id="title">
<span class="title"> C O N T R O L L E R</span>
</div>
<div id="message">
<span class="message">Your wireless controller is disconnected. Reconnect your wireless controller.</span>
</div>
</div>
<div id="basement">
<div id="icon"> <img class="icon" src="https://drive.google.com/uc?export=view&id=1ZHO3k7CGI_7AxJi2A0-3aMNM1sAXWHN_">
<div id="dismiss"> <span class="dismiss">Dismiss
</span>
</div>
</div>
</div>
<div id="director"> <span class="director"> OPEN DIRECTOR</span>
</div>
<div id="friends"> <span class="friends">69 friends online</span>
<img class="icon4" src="https://drive.google.com/uc?export=view&id=1bb-rA2hDayk1T7kOpVtAkAoXU_32a-bS">
</div>
<div id="invite"> <span class="invite">Invite Friends</span>
<img class="icon2" src="https://drive.google.com/uc?export=view&id=18WUa8u3oToBZVmgFTT3eM_i055M8y81N">
</div>
<div id="menu"> <span class="menu">Menu</span>
<img class="icon3" src="https://drive.google.com/uc?export=view&id=1x0iByNuEzmFjIc8-fb739t44HIya1RAc">
</div>
</body>
I'll take assistance In any form can get, I greatly appreciate the help.

$( document ).on( "click", function(
event ) {
if (!$(event.target).closest("#timer").length) {
$("#somediv").appendTo("#timer");
}
$("#somediv").hide();
});

Related

Centering HTML Content Inside Colorbox Iframe

I am using Jack Moore's Colorbox. I am having an HTML file open in an iframe popup. When the screen is smaller than the width of the content, the alignment is always at essentially left: 0.
I have noodled around witch the colorbox css and I can't seem to get this one figured out.
HTML:
<h2><a class="iframe" href="videolinks.html">[CLICK HERE]</a></h2>
CSS:
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; text-align: center; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%; text-align: center;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; }
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin: 0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
#cboxOverlay{background:url(../images/colorbox/overlay2.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90); z-index: 9999;}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(../images/colorbox/controls2.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(../images/colorbox/controls2.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(../images/colorbox/controls2.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(../images/colorbox/controls2.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(../images/colorbox/controls2.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(../images/colorbox/controls2.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(../images/colorbox/border2.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(../images/colorbox/border2.png) 0 -29px repeat-x;}
#cboxContent{background:white; height: 100%; margin: auto;}
.cboxIframe{background:#fff; margin-right: 0;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:0px;} /* THIS WAS '28px' WHICH CAUSED A BAR ALONG THE BOTTOM */
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{background:url(../images/colorbox/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) no-repeat center center;}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(../images/colorbox/controls2.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(../images/colorbox/controls2.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; top:0; left:0; opacity: 0.7; background-image: url(../images/colorbox/x2.png); background-size: 35px; width:35px; height:35px; text-indent:-9999px;}
#cboxClose:hover{opacity: 1.0}

Angular ng-repeat dose not bind data for a dynamically created Array

I have this bug I tried al the posts on StackOverflow and nothing is solving it like:
1) $rootScope Array.
2) $scope.$apply() (and after reading so much I knew it is not the best solution as it will gives an error because my input text field fire it on change so now need to use it)
3) Save the array in a service also not working
this is my code
app.factory('searchService', function() {
var searchItems= [
"Design",
"Graphic Design",
"PhotoShop",
"UI/UX Design",
"Web Design",
"Web Development",
"JavaScript",
"CSS3",
"HTML5",
"C#",
"ASP.Net",
"Bootstrap",
"Grid System",
"JQuery",
"JQuery UI",
"JQuery Mobile",
"Front-End",
"Back-End",
"PHP",
"MySQL",
"SQL Server",
"Branding",
"Logo Design",
"Business Cards",
"Print Design",
"Brochure Design",
"Vector Design",
"Facebook Posts",
"Facebook Covers",
"Facebook Apps Design",
"Digital Marketing",
"Social Media",
"Visual Studio.Net",
"App Design",
"App Developemnt",
"Mobile Apps Design",
"Mobile Apps Development",
"Game Design",
"Game Development",
"Android",
"Android Studio",
"iOS",
"Windows Phone",
"Adobe Air",
"Hypered Apps",
"Cordova",
"Universal Windows Apps",
"Actionscript 3",
"Flash",
"2D Animation",
"2D Characters",
"2D Cartoon Animation",
"Drawing",
"Coloring",
"Illustrating",
"Sketching",
"Systems Analysis",
"Visio",
"Pencil Sketcing",
"Oil Paintings",
"Book Authoring",
"Writing",
"E-Learning",
"Multimedia Design",
"Multimedia Development",
"Windows Application",
"3D Design",
"3D Modeling",
//--------------------------------
"Java 2SE (Comming Soon)",
"Aniamtion (Comming Soon)",
"Motion Graphics (Comming Soon)",
"Video Editing & Creating (Comming Soon)",
"Photography (Comming Soon)",
"Videography (Comming Soon)",
"3D Animation (Comming Soon)",
"Music Creation (Comming Soon)"
];
return searchItems;
});
app.factory('items', function() {
var property = [];
return {
getProperty: function () {
return property;
},
setProperty: function(value) {
property = value;
}
};
});
app.controller('searchCTRL', function($scope, $rootScope, searchService, sharedProperties, items){
"use strict";
setTimeout(function(){
addClass(document.getElementsByClassName("list-wrapper").item(0), 'animateIn');
},500);
$rootScope.searchItems = searchService;
//Sort Array
//$rootScope.searchItems.sort();
//Define Suggestions List
$rootScope.suggestions = [];
$rootScope.items = items.getProperty();
//Define Selected Suggestion Item
$rootScope.selectedIndex = -1;
//Function To Call On ng-change
$rootScope.search = function(){
$rootScope.suggestions = [];
var myMaxSuggestionListLength = 0;
for(var i=0;i < $rootScope.searchItems.length;i++){
var searchItemsSmallLetters = angular.lowercase($rootScope.searchItems[i]);
var searchTextSmallLetters = angular.lowercase($scope.searchText);
if(searchItemsSmallLetters.indexOf(searchTextSmallLetters) !== -1 && searchItemsSmallLetters.indexOf(searchTextSmallLetters) === 0){
$rootScope.suggestions.push(searchItemsSmallLetters);
items.setProperty($rootScope.suggestions);
myMaxSuggestionListLength += 1;
if(myMaxSuggestionListLength === 5){
break;
}
}
}
//$rootScope.items = items.getProperty();
angular.copy(items.getProperty(),$rootScope.items)
console.log($rootScope.items)
};
//Keep Track Of Search Text Value During The Selection From The Suggestions List
$rootScope.$watch('selectedIndex',function(val){
if(val !== -1) {
$scope.searchText = $rootScope.suggestions[$rootScope.selectedIndex];
sharedProperties.setProperty($scope.searchText);
}
});
//Text Field Events
//Function To Call on ng-keydown
$rootScope.checkKeyDown = function(event){
if(event.keyCode === 40){//down key, increment selectedIndex
event.preventDefault();
if($rootScope.selectedIndex+1 < $rootScope.suggestions.length){
$rootScope.selectedIndex++;
}else{
$rootScope.selectedIndex = 0;
}
}else if(event.keyCode === 38){ //up key, decrement selectedIndex
event.preventDefault();
if($rootScope.selectedIndex-1 >= 0){
$rootScope.selectedIndex--;
}else{
$rootScope.selectedIndex = $rootScope.suggestions.length-1;
}
}else if(event.keyCode === 13){ //enter key, empty suggestions array
event.preventDefault();
$rootScope.suggestions = [];
$rootScope.selectedIndex = -1;
sharedProperties.setProperty($scope.searchText);
$rootScope.showPopUpContent();
}else if(event.keyCode === 27){ //ESC key, empty suggestions array
event.preventDefault();
$rootScope.suggestions = [];
$rootScope.selectedIndex = -1;
}else{
$rootScope.search();
}
};
//ClickOutSide
var exclude1 = document.getElementById('textFiled');
$rootScope.hideMenu = function($event){
$rootScope.search();
//make a condition for every object you wat to exclude
if($event.target !== exclude1) {
$rootScope.suggestions = [];
$rootScope.selectedIndex = -1;
}
};
//======================================
//Function To Call on ng-keyup
$rootScope.checkKeyUp = function(event){
if(event.keyCode !== 8 || event.keyCode !== 46){//delete or backspace
if($scope.searchText === ""){
$rootScope.suggestions = [];
$rootScope.selectedIndex = -1;
}
}
};
//======================================
//List Item Events
//Function To Call on ng-click
$rootScope.AssignValueAndHide = function(index){
$scope.searchText = $rootScope.suggestions[index];
sharedProperties.setProperty($scope.searchText);
$rootScope.suggestions=[];
$rootScope.selectedIndex = -1;
};
});
index.html
<div class="list-wrapper" ng-controller="searchCTRL">
<header>
<h1><img class="emadzedan" src="./img/EmadZedan.png" width="123" height="123" alt="Emad Zedan"/></h1>
<h1>Emad Morris Zedan</h1>
<h4>Professional Web Designer,Front-End Developer, Artist & Book Author</h4>
</header>
<div class="label">Search for A Samples Category</div>
<div><input type="text" autofocus placeholder="e.g. Web Design or Start With Any Letter..." id="textFiled" class="input" ng-keydown="checkKeyDown($event)" ng-keyup="checkKeyUp($event)" ng-model="searchText" ng-change="search()" /></div>
<ul class="suggestions-list">
<li ng-repeat="suggestion in items track by $index" ng-class="{active : selectedIndex === $index}" ng-click="AssignValueAndHide($index)">{{suggestion}}</li>
</ul>
<div class="label">Search for "Design" to view all samples as "Design" is common along all samples.</div>
<div class="buttonDiv" ng-click="showPopUpContent($index)">Search</div>
<div class="menu">
<div class="floatLeft">Resume</div>
<div class="floatLeft">|</div>
<div class="floatLeft">C.V.</div>
<div class="floatLeft">|</div>
<div class="floatLeft">Blog</div>
<div class="clearboth"></div>
</div>
<footer>Copyrights © 2017 for Emad Zedan</footer>
</div>
{{Suggestion}} is empty although the list is showing items by the length of the array
css.css
#charset "utf-8";
/* CSS Document */
body{
font-family:'Oswald', sans-serif;
font-size:14px;
font-weight: 300;
margin:0px;
padding:0px;
color: #ddd;
background-color: #121212;
}
.clearboth{
clear:both;
}
.floatLeft{
float:left;
}
::-webkit-input-placeholder{
color:#333;
/*padding-left:10px;*/
}
:-moz-placeholder{ /* Firefox 18- */
color:#333;
/*padding-left:10px;*/
}
::-moz-placeholder{ /* Firefox 19+ */
color:#333;
/*padding-left:10px;*/
}
:-ms-input-placeholder{
color:#333;
/*padding-left:10px;*/
}
input{
color:#333;
}
.list-wrapper {
position:absolute;
width:300px;
height:150px;
top:10%;
left:50%;
margin-left:-150px;
opacity:0;
transform: translateY(200px) rotateX(90deg);
-webkit-transform: translateY(200px) rotateX(90deg);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
-webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
}
header{
prespective:1000;
}
h1, h4{
text-align:center;
padding:5px;
margin:5px;
line-height: normal;
}
h4{
color:#990000;
}
.emadzedan{
border-radius:50%;
border:3px solid #900;
position:relative;
margin:5px auto;
}
.label{
padding: 5px 10px;
text-align: center;
font-size: 14px;
font-weight: 300;
display: block;
width: 300px;
margin: 0 auto;
line-height: normal;
white-space: normal;
}
footer{
text-align:center;
width:100%;
}
.menu{
text-align:center;
width:150px;
left:50%;
margin:10px auto;
}
.menu a, .menu a:visited{
color:#ddd;
text-decoration:none;
display:inline-block;
padding:0px 10px;
}
.menu a:hover{
color:#900;
}
.input{
width:280px;
height:35px;
outline:none;
padding:0px 10px;
margin:0px auto;
display:block;
border:1px solid #ddd;
}
.suggestions-list {
position: absolute;
list-style-type: none;
margin:0px;
padding:0px;
overflow:auto;
z-index:2;
margin-left:10px;
}
.suggestions-list li {
color: #000;
padding: 5px 10px;
height:30px;
cursor: pointer;
background: #f5f5f5;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
width:280px;
}
.suggestions-list li:last-child{
border-bottom: 1px solid #ddd;
}
.suggestions-list li:hover {
background: #ddd;
}
.suggestions-list li:active,
.suggestions-list li.active {
color: #FFFFFF;
background: #900;
width:280px;
}
.suggestions-list:focus{
outline:none;
}
.buttonDiv{
color: #FFF;
background: #900;
border:1px solid #FFF;
padding:10px 50px;
display:inline-block;
border-radius:50px;
cursor:pointer;
text-align:center;
max-width:50%;
margin:10px 0px 10px 85px;
}
.buttonDiv:hover{
color:#900;
background:#FFF;
border:1px solid #900;
}
/*-----------------------------*/
.popup{
background-color:#121212;
height:auto;
min-height:100vh;
width:100%;
position:absolute;
left:0px;
top:0px;
z-index:3;
display:none;
}
.popupHeader{
padding:10px 0px 0px 15px;
font-size:16px;
color:#333;
height:50px;
background-color:#ddd;
position:Fixed;
top:0;
left:0;
width:100%;
z-index:10;
}
.popupContent{
width:90%;
margin:50px auto;
}
.closeButton{
color: #333;
padding:5px 15px;
height:30px;
display:inline-block;
border-radius:50px;
cursor:pointer;
text-align:center;
float:right;
font-size:64px;
position:absolute;
top:-25px;
right:-5px;
perspective: 1000px;
}
.closeButton:hover{
color:#900;
}
.block{
float:left;
margin:10px 10px 0px 0px;
width:32.6%;
display:none;
cursor:pointer;
opacity:0;
transform: translateY(200px) rotateX(90deg);
-webkit-transform: translateY(200px) rotateX(90deg);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
-webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
}
.animateIn{
display:block;
opacity:1;
transform: translateY(0px) rotateX(0deg);
-webkit-transform: translateY(0px) rotateX(0deg);
}
.block img {
border:5px solid #333;
opacity:0.8;
}
.block img:hover {
border:5px solid #900;
opacity:1;
}
#media all and (max-width: 1530px){
.block{
float:left;
margin:10px 10px 0px 0px;
width:48.5%;
display:none;
}
}
#media all and (max-width: 800px){
.block{
float:left;
margin:10px 10px 0px 0px;
width:100%;
display:none;
}
}
.popupHeader .emadzedan{
position:relative;
top:-5px;
border:1px solid #900;
}
.positionSearchTerm{
position:relative;
left:5px;
top:-5px;
}
.SearchTerm{
color:#900;
text-transform: capitalize;
}
.details{
background-color:#333;
width:100%;
min-height:100vh;
max-height:100vh;
display:none;
z-index:5;
position:fixed;
top:0px;
left:0px;
prespective:1000;
}
.detailsInner{
width:50%;
position:absolute;
z-index:6;
top:10%;
left:50%;
margin-left:-25%;
display:none;
transform: translateY(500px) rotateY(90deg);
-webkit-transform: translateY(500px) rotateY(90deg);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
-webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.26, 1.55);
}
.animateIn2{
transform: translateY(0px) rotateY(0deg);
-webkit-transform: translateY(0px) rotateY(0deg);
}
.animateOut2{
transform: translateY(500px) rotateY(90deg);
-webkit-transform: translateY(500px) rotateY(90deg);
}
.DetailsHeader{
padding:15px 0px 15px 15px;
font-size:16px;
color:#333;
height:50px;
background-color:#ddd;
border-top:5px solid #900;
border-left:5px solid #900;
border-right:5px solid #900;
}
#DetailsContent{
border-bottom:5px solid #900;
border-left:5px solid #900;
border-right:5px solid #900;
}
.closeButtonInner{
color: #333;
padding:5px 15px;
height:30px;
display:inline-block;
border-radius:50px;
cursor:pointer;
text-align:center;
float:right;
font-size:64px;
position:relative;
top:-45px;
}
.closeButtonInner:hover{
color:#900;
}
This is a snapshot shot of the design to make see the result on my PC:
I found the correct solution for it:
<ul class="suggestions-list">
<li ng-repeat="suggestion in items track by $index" ng-class="{active : selectedIndex === $index}" ng-click="AssignValueAndHide($index)" data-ng-bind="suggestion"></li>
</ul>
data-ng-bind="suggestion" insted of {{suggestion}}
you must use track by $index for such array.
check this angular documentation
<div ng-repeat="n in suggestions track by $index">
{{n}}
</div>
this might help you.
Heloo Emad, I got the problem you are facing. Even I faced this problem and I got the solution from the article Facing problem with ng-Repeat . The best part is , they just don't give the solution but also the reason why it happens.
For better understanding , you can also find a youtube video which explains everything.
Hope it works for you too.

jqueryUI Draggable mouse offset

Trying to code a similar feel to the ios8 Lockscreen, having a dragable item only move on the x axis.
$( "#IDlsDragable" ).draggable({ axis: "x" });
.lockscreen {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:rgba(89,54,158,1);
background-image:url('../pics/wall.png');
background-size:cover;
background-position:center center;
}
.lockscreenFace {
position:absolute;
top:0px;
left:1080px;
width:1080px;
height:1920px;
}
.lockscreenSlider {
position:absolute;
top:0px;
left:-1080px;
width:200%;
height:100%;
}
.lockscreenClock {
position:absolute;
top:110px;
left:0px;
width:100%;
height:300px;
font-size: 296px;
color:white;
text-align:center;
}
.lockscreenDate {
position:absolute;
top:432px;
left:0px;
width:100%;
height:80px;
font-size: 60px;
color:white;
text-align:center;
}
.lockscreenSlideText {
position:absolute;
bottom:234px;
left:0px;
width:100%;
height:80px;
font-size: 80px;
font-weight:bold;
color:white;
text-align:center;
background:url('../pics/highlight.png');
-webkit-animation: slidetounlock 3s infinite linear;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.lockscreenSlideText:before {
content: "\f105";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size:85px;
line-height:1;
-webkit-font-smoothing: antialiased;
}
#-webkit-keyframes slidetounlock {
0% {
background-position: -880px 0;
}
100% {
background-position: 0px 0;
}
}
<div class="lockscreen">
<div id="IDlsDragable" class="lockscreenSlider">
<div class="lockscreenFace">
<div id="IDlsClock" class="lockscreenClock">
#TIME#
</div>
<div id="IDlsDate" class="lockscreenDate">
#DATE#
</div>
<div class="lockscreenSlideText">
slide to unlock
</div>
<div class="cameraGrabby">
</div>
</div>
</div>
</div>
When I begin to drag it to the right the div "lockscreenSlider" jerks to the right.
transform:scale([anything]);
this causes issues with mouse offset

I created a jQuery slideshow but it keeps repeating the same image

as you can see in the code provided below, I have created a simple jQuery slideshow that runs automatically. But I have ran into a little problem that I cant seem to figure out. When the slideshow runs it goes perfectly, but once it gets to the last image then it just keeps on repeating! How can I prevent this from happening?? The code is below and there is also a link to the images. THANKS!:) P.S- I'm using older jQuery versions because of deprecated functions!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Home
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.18.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body class="body" onload="Slider()">
<div class="container">
<div class="bg">
<div class="mainHeader">
<nav>
<ul>
<li class="last">Contact</li>
<li>Products</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
</div>
<div class="topArea">
<div class="topAInfo">
<h2>Here is just a simple title</h2>
<p>This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text.</p>
</div>
</div>
<div class="middleArea">
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
<div class="middleAInfo">
<h3>Welcome to</h3>
<p>A dummy website!!</p>
</div>
<div class="latestNews">
<hr>
<h2>Latest News</h2>
<div class="post">
<p class="date">March 28, 2015</p>
<p>New advanced update with double speed and a whole bunch of cool new st.. more>></p>
</div>
<div class="post">
<p class="date">March 28, 2015</p>
<p>New advanced update with double speed and a whole bunch of cool new st.. more>></p>
</div>
<div class="newsLetter">
<div class="newsLInfo">
<h3>Newsletter sign-up</h3>
<hr>
<p>If you would like to sign up for our free NewsLetter please enter your email below</p>
Unsubscribe
</div>
<input type="text" name="textBox" class="textBox" style="width:200px; height:20px;">
<div class="button1">Submit</div>
</div>
</div>
</div>
</div>
</div>
<!--https://www.freelancer.com/jobs/php/PSD-HTML-page-only-page/-->
</body>
</html>
CSS:
*{margin:0;padding:0;}
#font-face {
font-family: SketchFont;
src: url(Fonts/Sketch_Block.ttf);
}
body{
background:#ebebeb;
width:80%;
height:1300px;
}
.container{
width:100%;
}
.mainHeader nav{
width:95%;
height:40px;
position:relative;
left:30px;
top:60px;
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* Standard syntax */
/*margin: 100px 50px 0 150px;*/
}
.mainHeader nav ul{
}
.mainHeader nav ul li{
float:right;
display:inline;
text-align:center;
border:1px solid #ADADA8;
border-bottom:none;
border-top:none;
border-left:none;
padding-top:20px;
}
.mainHeader nav ul li.last{
border-right:none;
}
.mainHeader nav ul li a{
text-decoration:none;
/*margin:10px Use to replace paddings right/left but causes hovedr errors*/
font-family:Arial;
position:relative;
top:-10px;
color:white;
padding:10px;
padding-right:20px;
padding-left:20px;
}
.mainHeader nav ul li a.active{
background:white;
color:black;
}
.mainHeader nav ul li a:hover{
background:white;
color:black;
}
.topArea{
width:95%;
height:300px;
position:relative;
left:30px;
top:10px;
/*margin: -50px 50px 0 150px;*/
background: -webkit-linear-gradient(white,rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white,rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white,rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(white,rgb(33, 171, 198)); /* Standard syntax */
}
.topArea .topAInfo{
margin:20px;
padding-top:60px;
width:60%;
margin:50px;
font-family:;
}
.topArea .topAInfo h2{
font-family:SketchFont;
font-weight: normal;
}
.topArea .topAInfo p{
line-height:25px;
font-family:cursive;
font-size:15px;
}
.bg{
width:100%;
height:1200px;
position:relative;
left:10%;
background:linear-gradient(blue, white, white, blue); /* Standard syntax */
/*background-image:url(bg2.jpg);*/
background-repeat: no-repeat;
}
.middleArea{
background:linear-gradient(white, white, #55C4E9); /* Standard syntax */;
height:600px;
width:95%;
position:relative;
left:30px;
top:10px;
}
.middleArea .middleAInfo {
padding:30px 0 0 30px;
}
.middleArea .middleAInfo p{
color:#49CBF0;
font-size:30px;
font-weight:400;
}
.middleArea .latestNews {
width:250px;
height:300px;
background:#0099cc;
float:right;
position:relative;
top:-60px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews hr{
position:relative;
top:50px;
color:black;
width:90%;
margin-left:10px;
}
.middleArea .latestNews h2{
padding:10px 10px 10px 10px;
color:white;
}
.middleArea .latestNews p.date{
color:white;
font-size:13px;
font-weight:bold;
padding:10px 10px 10px 20px;
}
.middleArea .latestNews p{
color:white;
font-size:13px;
position:relative;
left:10px;
width:225px;
}
.middleArea .latestNews a{
color:blue;
font-size:15px;
font-family:Arial;
}
.middleArea .latestNews .newsLetter{
background:white;
width:250px;
height:200px;
position:relative;
top:80px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews .newsLetter .textBox{
position:relative;
top:40px;
left:25px;
}
.middleArea .latestNews .newsLetter .button1{
width:50px;
height:25px;
background:#1768ED;
padding:3px 10px 2px 10px;
border-radius:7px;
text-align:center;
color:white;
font-family:Arial;
position:relative;
top:45px;
left:155px;
}
.middleArea .latestNews .newsLetter .button1:hover{
cursor: pointer;
}
.middleArea .latestNews .newsLetter h3{
position:relative;
top:15px;
left:10px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter hr{
position:relative;
top:20px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter p{
color:black;
position:relative;
top:40px;
color:#21AFEA;
font-size:15px;
}
.middleArea .latestNews .newsLetter a{
position:relative;
top:90px;
left:30px;
}
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(loading.gif);
background-repeat:no-repeat;
background-position:center;
background-size: 100px 100px;
}
.slider img{
display:none;
}
Javascript:
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = 3;
var count = 2;
setInterval(function(){
$(".slider #"+count).show("slide", {direction:'right'}, 500);
$(".slider #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
Images:
https://www.dropbox.com/s/z8cxqlfp7i46066/slides.zip?dl=0
Hello you mistake was in the if-statement.
if(count == sc){
count == 1;
}else{
count = count + 1;
}
You wrote
count == 1;
instead of
count = 1;
Common mistake, made it a lot by myself. Hard to track.
This is how your script should look like:
function Slider(){
$(".slider #1").show("fade", 100);
$(".slider #1").delay(1000).hide("slide", {direction:'left'}, 100);
sc = 3;
count = 2;
setInterval(function(){
$(".slider #"+count).show("slide", {direction:'right'}, 100);
$(".slider #"+count).delay(1000).hide("slide", {direction:'left'}, 100);
if(count == sc){
count = 1;
}else{
count++;
}
}, 1000);
}
You should start to use you console (nearly all modern browser have one, enable it by pressing F12 (FireFox/Chrome))
How about passing next slide as a parameter to the function?
function Slider(i){
$(".slider #"+i).show("fade", 500);
$(".slider #"+i).delay(5500).hide("slide", {direction:'left'}, 500);
var sc = 3;
var netxslide=i+1;
if (nextslide==sc+1){nextslide=1}
setInterval(function(){Slider(nextslide)},6500);
}
if(count == sc){
count == 1;
}else{
count = count + 1;
}
Your first count == 1; should be count = 1;
You're not setting the variable, only calculating TRUE.
Replace with:
if(count == sc){
count = 1;
}else{
count++;
}

Center multiple elements in a fluid fixed div

I am trying to center multiple elements, img and button types, in a div that is fixed to the top of the screen. I have tried all the tricks I could find on the internet but none have worked. I want it to work no matter what the windows' size is.
<div id='FixedMenu'>
<button class='MenuItem'>Home</button>
<button class='MenuItem'>About</button>
<img id='Main' src='http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png'></img>
<button class='MenuItem'>Tools</button>
<button class='MenuItem'>Events</button>
<img id='CloseMenu' src='http://upload.wikimedia.org/wikipedia/commons/d/df/Chevron_up_font_awesome.svg'></img>
</div>
http://jsfiddle.net/clarinetking/2PGZS/37/
if you add a fake flex/justify-content you can have something close to what you are looking for :
http://jsfiddle.net/2PGZS/45/
#Main {
vertical-align:middle;
height:50px;
width:80px;
}
#FixedMenu {
position:fixed;
margin:0 auto;
top:0%;
left:0%;
background:#444444;
width:100%;
height:70px;
transition: all 1s;
text-align:justify;/* prepare fake flex justify */
}
#FixedMenu:after { /* add an extra line so inline content is justified */
content:'';
display:inline-block;
width:100%;
}
#FixedMenu.active {
background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
height:40px;
width:80px;
vertical-align:middle;
}
#Start {
margin-top:100px;
}
#CloseMenu {
width:70px;
height:70px;
transition: all 1s;
vertical-align:middle;
}
#CloseMenu.opacite {
opacity:0.1;
}
alternative with uparrow always on top right http://jsfiddle.net/2PGZS/46/
Add text-align:center; to your FixedMenu css
http://jsfiddle.net/2aUbv/
There is no need in js here. Pure css.
#Main {
position:relative;
height:50px;
width:80px;
display: inline-block;
}
#FixedMenu {
position:fixed;
margin:0 auto;
top:0%;
left:0%;
background:#444444;
width:100%;
height:70px;
transition: all 1s;
text-align:center;
}
#FixedMenu.active {
background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
display: inline-block;
height:40px;
width:80px;
float:top;
}
#Start {
margin-top:100px;
}
#CloseMenu {
position:fixed;
width:80px;
height:80px;
transition: all 1s;
}
#CloseMenu.opacite {
opacity:0.1;
}
#FixedMenu * {
}

Categories