I have been struggling to get something to work:
https://jsfiddle.net/CreativeAU/ys12ed05/
warningbutton.onclick = function buttonClicks() {
count += 1;
if (count > 1) {
window.location.href = "http://www.google.com.au";
}
else {
warningbutton.onclick = function() {warningpopup.style.display = "block";}
}};
What I'm currently trying to do
The first time a user clicks 'Go To Page 2', a warning popup will appear. Once they close the warning and click the button again - it will take them to Page 2.
Right now:
Nothing happens on the first button click.
On the second click, and every button click after = the warning popup appears.
Ideally what I want
When a user arrives to a page (let's call it Page1), I want them to have to have clicked Box 1 OR Box 2 at least once - before clicking the 'Go To Page 2' button. If they haven't - then a 'warning popup' will appear over the screen telling them that they need to. I have very little idea how to code this using other divs.
If anyone is able to help me solve 'Ideally what I want' that would be awesome, but otherwise I will settle for what 'I'm currently trying to do'.
I've set it all up on the JsFiddle page just so you can visualise what I'm after.
this does what you want i think.
the link to google wont work, but this is because of stackoverflow.
var counter = 0;
$(document).ready(function(){
$('#first').click(function(){
counter++
});
$('#second').click(function(){
counter++
});
$('#next-page').click(function(){
if (counter >= 1) {
window.location.href = "http://www.google.com.au";
}else{
$('#warning-popup').css("display", "block");
}
});
$('#warning-popup').click(function(){
$(this).css("display", "none");
});
});
#wrapper {
max-width: 1200px;
margin: 0 auto;
}
#first, #second, #next-page {
text-align: center;
vertical-align: middle;
line-height: 125px;
font-size: 25px;
color: #FFF;
margin: 10px;
}
#first, #second {
display: inline-block;
background-color: #189a3d;
width: 125px;
height: 125px;
}
#next-page {
display: block;
background-color: #2e82d0;
width: 270px;
height: 125px;
}
.overlay {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.75);
text-align: center;
padding-top: 25px;
font-size: 40px;
color: #FFF;
}
#close {
color: orange;
float: right;
font-size: 30px;
text-decoration: underline;
margin-top: -0.35em;
}#wrapper {
max-width: 1200px;
margin: 0 auto;
}
#first, #second, #next-page {
text-align: center;
vertical-align: middle;
line-height: 125px;
font-size: 25px;
color: #FFF;
margin: 10px;
}
#first, #second {
display: inline-block;
background-color: #189a3d;
width: 125px;
height: 125px;
}
#next-page {
display: block;
background-color: #2e82d0;
width: 270px;
height: 125px;
}
.overlay {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.75);
text-align: center;
padding-top: 25px;
font-size: 40px;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="first">B1</div>
<div id="second">B2</div>
<div id="warning-popup" class="overlay">
WARNING TEXT HERE
</div>
<div id="next-page">Go to Page 2</div>
</div>
The following code should work, showing the alert if clicked the first time, and redirecting to google after another click.
var count = 0;
warningbutton.onclick = function buttonClicks() {
count += 1;
if (count > 1) {
window.location.href = "http://www.google.com.au";
}
else {
warningpopup.style.display = "block";
}
};
You need to change your else code.
You bind a new event on click, but do not trigger a click. You simply need to change the display attribute of your warning pop-up, without binding it on the click event.
A simple fix:
if (count > 1) {
window.location.href = "http://www.google.com.au";
}
else {
warningpopup.style.display = "block";
}};
you are basically registering a new function with the onclick event when the count is not greater than 1. solution should be
warningbutton.onclick = function buttonClicks() {
count += 1;
console.log(count);
if (count > 1) {
window.location.href = "http://www.google.com.au";
}
else {
warningpopup.style.display = "block";
}};
Related
Having this design:
There is a table with some rows, when a row is clicked, that kebab button (3 vertical dots) is visible.
When the button is clicked it should open an element which has some data in it - in this case a list of actions.
The part with showing the kebab button is working:
{
id: 'my-button',
Cell: ({ cell }: CellProps<MyCell>) => {
if (cell.row.index === selectedIndex) {
return (
<div>
<Button
icon={<ThreeDots />}
onClick={toggleModal}
/>
</div>
);
}
return <div></div>;
}
}
when the row is clicked, the 3-dots button is visible. There is also a boolean which is initially set to false but toggles its value when the button is clicked (toggleModal).
But how can that element with the list added under the button?
Done something like:
{isModalOpened ? <div className='absolute'>test</div> : null}
Or maybe is there any online solution to fix this?
To fix this issue, you just need to use:
event.stopPropagation();
Please check my demo below:
function rowClick() {
const status = document.getElementById("actions").style.display;
document.getElementById("actions").style.display =
status === "block" ? "none" : "block";
}
function btnClick(event) {
event.stopPropagation();
const status = document.getElementById("nav").style.display;
document.getElementById("nav").style.display =
status === "block" ? "none" : "block";
}
.row {
width: 80%;
display: flex;
align-items: center;
justify-content: space-between;
background: lightblue;
padding: 10px 20px;
}
.actions {
display: none;
position: relative;
z-index: 1;
}
nav {
display: none;
position: absolute;
top: 50px;
right: 0;
z-index: 10;
background: white;
border: 1px solid grey;
min-width: 170px;
}
nav p {
padding: 10px;
border-bottom: 1px solid grey;
margin: 0;
}
nav p:last-child {
border-bottom: 0;
}
.btn {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
background: green;
text-align: center;
cursor: pointer;
color: white;
}
<div class='row' onclick="rowClick()">
This is a row <div class="actions" id="actions"><span class="btn" onclick="btnClick(event)">⁝</span><nav id="nav"><p>Do this</p><p>Do that</p></nav></div></div>
In my snippet below you will see a blue and red block. The red is indicating that a specific duty is not completed. What I am trying to do for these unfinished duties is dynamically make its outer div (one of these #account-unfinished-package, #account-unfinished-logo) to act as a link.
I am unsure of how to do this dynamically, since the duties (blocks) will be changing from unfinished/finished. I do not want the finished blocks to have links, or else I would just add it to the html.
Does anyone have any ideas of how I can make the outer divs for the unfinished blocks act as a link dynamically?
Here is a jsfiddle.
var unfinishedPack = 1;
var unfinishedLogo = 0;
if (unfinishedPack == 0) {
$('#account-unfinished-package').addClass('red');
$('#unfinished-title-package').html('Product package needs setup.');
$('#unfinished-img-package').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/error-circle.png' class='unfinished-img' alt='Package Needs Setup'>");
}
else if (unfinishedPack > 0) {
$('#account-unfinished-package').addClass('blue');
$('#unfinished-title-package').html('Product Package Setup Complete!');
$('#unfinished-img-package').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/checkmark-circle-white.png' class='unfinished-img' alt='Package Complete'>");
}
if (unfinishedLogo == 0) {
$('#account-unfinished-logo').addClass('red');
$('#unfinished-title-logo').html('Company logo needs added. Click to add');
$('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/error-circle.png' class='unfinished-img' alt='Logo Needs Added'>");
}
else if (unfinishedPack > 0) {
$('#account-unfinished-logo').addClass('blue');
$('#unfinished-title-logo').html('Account Logos Complete!');
$('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/checkmark-circle-white.png' class='unfinished-img' alt='Logo Complete'>");
}
#account-unfinished {
width: 100%;
height: auto;
/*color: #D8000C;*/
/*background: #FFBABA;*/
margin-bottom: 10px;
display: none;
}
#account-unfinished.block {
display: block;
}
#account-unfinished-package, #account-unfinished-logo {
width: 50%;
height: 100%;
display: inline-block;
vertical-align: top;
}
#account-unfinished-package.red, #account-unfinished-logo.red {
background: #D8000C;
height: 100%;
}
#account-unfinished-package.blue, #account-unfinished-logo.blue {
background: #09afdf;
height: 100%;
}
.account-unfinished-inner {
padding: 15px;
}
.account-unfinished-title {
font-size: 1.5rem;
color: #FFF;
font-family: 'Lato', sans-serif;
line-height: 1.4em;
text-align: center;
}
.account-unfinished-title a {
color: #FFF;
}
#unfinished-img-package, #unfinished-img-logo {
margin: 10px auto;
display: block;
text-align: center;
}
.unfinished-img {
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="account-unfinished-package">
<div class="account-unfinished-inner">
<p class="account-unfinished-title" id="unfinished-title-package"></p>
<div id="unfinished-img-package"></div>
</div>
</div><div id="account-unfinished-logo">
<div class="account-unfinished-inner">
<p class="account-unfinished-title" id="unfinished-title-logo"></p>
<div id="unfinished-img-logo"></div>
</div>
</div>
Use the wrapInner function:
if (unfinishedLogo == 0) {
$('#account-unfinished-logo').addClass('red');
$('#account-unfinished-logo').wrapInner('');
$('#unfinished-title-logo').html('Company logo needs added. Click to add');
$('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/error-circle.png' class='unfinished-img' alt='Logo Needs Added'>");
}
else if (unfinishedPack > 0) {
$('#account-unfinished-logo').addClass('blue');
$('#unfinished-title-logo').html('Account Logos Complete!');
$('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/checkmark-circle-white.png' class='unfinished-img' alt='Logo Complete'>");
}
I made you a fiddle: https://jsfiddle.net/4mLjdee5/
I have the following function that resets a button and applies styling once it is executed:
function reset(){
var boxes = getBoxes();
for(i = 0 ; i < boxes.length; i++) {
boxes[i].innerHTML = "";
}
document.getElementById("start_button").innerHTML = "Start Game";
document.getElementById("start_button").setAttribute('onclick', 'gameStart()');
document.getElementById("start_button").style.color = "black";
document.getElementById("start_button").style.backgroundColor = "lightgreen";
}
However, as you can see, it is getting repetitive to change each style element in the function. Especially if I want this style to be applied:
#button{
text-align: center;
}
#start_button{
width: 10%;
height: 50px;
margin-top: 4%;
margin-left: auto;
margin-right: auto;
background: lightgreen;
color:black;
}
#start_button:hover {
background: green;
color: white;
}
Is there a way in JavaScript to link to an entire block of style code?
If you change the start_button to a class; which it should be because there will be more than one of them on the page; you can use the className property.
CSS:
.start_button{
width: 10%;
height: 50px;
margin-top: 4%;
margin-left: auto;
margin-right: auto;
background: lightgreen;
color:black;
}
.start_button:hover{
background:green;
color: white;
}
Look like you are creating buttons so you can grab the buttons
JS:
document.getElementsByTagName("button").className = "start_button";
Im trying to pass specific form field from form into modal, with my code I managed to pass the whole form, but cant achive to target only specific elements.
1) Pass only spefic field from form.
2)In my code you can see that im replacing some css class with new one, and i need to check with IF , are they exist or not.
3) and if someone can explain to me $.ajax -how to force the cache to false.
4) Also i have 2 button trigers, if you click on first i want to show let's say 1,2,3,4 fields, and if you click on second button you get 3,4,5,6 fields, i know that i can write two sepparate js, but it would be better to hear from you what is best option to achive this.
This is mine js script for now:
function onclick_modal() {
var modalcreate = '<div id="fast-modal">';
modalcreate += '<div id="fastmodal-contain">';
modalcreate += '<div id="modal-data"></div>';
modalcreate += '</div>';
modalcreate += '</div>';
var $html_modal = $(modalcreate);
$('body').append($html_modal);
$html_modal.on('click', function(e){ if($(e.target).attr('id')=="fast-modal") { $(this).remove(); } });
$.ajax({
url: "https://linkwhereformis",
}).done(function(data) {
var $htmldata = $($(data).find('#formid')[0].outerHTML);
$htmldata.find('.dontneedthis').parent().remove();
$htmldata.find( "div" ).removeClass().addClass('grid-tablet-12-12 grid-desktop-12-12');
$htmldata.find( "div ul li span" ).removeClass().addClass('grid-tablet-12-12 grid-desktop-12-12 lajna');
$htmldata.find( "div ul li div" ).removeClass().addClass('grid-tablet-5-7 grid-desktop-6-8');
$htmldata.find('.buttons').html('<button type="submit" class="modalnibutton" data-step="5" id="confirm-form-submit modalbutton">Submit</button>');
$html_modal.find('#modal-data').html( $htmldata );
});
}
$(document).ready(function() {
$('#modallink').click(function(e) {
e.preventDefault();
onclick_modal();
});
$('#modallink2').click(function(e) {
e.preventDefault();
onclick_modal();
});
});
.modalnibutton{
float: none;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
background: rgba(255, 87, 34, 0.88);
color: white;
border-radius: 3px;
padding: 8px;
padding-left: 27px;
padding-right: 27px;
font-size: 16px;
}
#fast-modal{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index: 9997;
background: rgba(0, 0, 0, 0.42);
overflow-y: scroll;
overflow-x: hidden;
}
#fastmodal-contain {
width: 700px; max-width: 100%; margin: 0 auto; background: #fff; min-height: 100px; margin-top: 50px;
}
#modal-data{
float: left; background: #fff; width: 100%; padding: 15px 0px;
}
#modalbutton {
margin-left: auto;
margin-right: auto;
display: block;
float: none;
border-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" title="" style="zoom: 1;" id="modallink">
SUBMIT LINK 1 </a>
<BR><BR>
<a href="#" title="" style="zoom: 1;" id="modallink2">
SUBMIT LINK 2 </a>
I am writing a slider from scratch, no plugins.
I have my slider working, based on adding the slides together and plus or minus the length of the slider window.
It has become complicated when pagination needs to be added. I can't seem to wrap my head around the logic of the function needed to be written that states.
if button 1 is clicked run the function 1 time and go to slide one.
if button 2 is clicked run the function 2 times and go to slide two. .... and so on..
The issue I see coming from this is if on slide 3 and the button 4 is clicked the function only needs to move once not 4 times!! This is where my head breaks and all logic spills out of my ears.
How do I go about writing something like this?
here is the jsfiddle I have so far. http://jsfiddle.net/r5DY8/2/
Any help would be appreciated.
:: all the code on one page if you don't want to use jsfiddle ::
<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-1.9.0.min.js'type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Marmelad' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: 'Marmelad', sans-serif;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
#slideContainer {
position: relative;
width: 990px;
height: 275px;
float: left;
overflow: hidden;
margin-top:5%;
margin-left:15%;
}
#slideWrap {
width: 3960px;
height: 275px;
position: absolute;
top: 0;
left: 0;
}
.slide {
width: 990px;
height: 275px;
float: left;
}
.slide:first-child { background-color: #009999; }
.slide:nth-child(2) { background-color: #CC0033; }
.slide:nth-child(3) { background-color: #FFFF66; }
.slide:nth-child(4) { background-color: #006699; }
#clickLeft{
color: black;
float: left;
margin: 12% 0% 0 15%;
/*background: url("prev.png") no-repeat;*/
width: 60px;
height: 60px;
cursor: pointer;
list-style: none;
position: absolute;
z-index: 9;
border:1px solid black;/**/
}
#clickRight{
color: black;
float: right;
margin: 12% 0 0 79.5%;
/*background: url("next.png") no-repeat;*/
width: 60px;
height: 60px;
cursor: pointer;
list-style: none;
position: absolute;
border:1px solid black;/**/
}
.dots{
width: 9%;
position: absolute;
top: 310px;
text-align: center;
height: 45px;
padding-top: 5px;
background: white;
left: 43.5%;
border-radius: 8px;
list-style:none;
}
.dots li {
display: inline-block;
list-style:none;
}
.dots li:first-child {
margin-left:-40px;
}
.dots li a{
width: 16px;
height: 16px;
display: block;
background: #ededed;
cursor: pointer;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
margin: 5px;
}
.dots li a:hover { background: rgba(0, 0, 0, 0.7); }
.styleDots { background: #a4acb2; }
.active { background: #a4acb2;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;}
li.pagerItem{
}
</style>
<script type="text/javascript">
$(function(){
var currentSlidePosition = 0;
var slideW = 990;
var allSlides = $('.slide');
var numberOfSlides = allSlides.length;
var marker;
$('.slide').each(function(i) {
listNumber=i+1;
marker = $("<li>");
marker.addClass('pagerItem '+listNumber);
$("<a href='#' ></a>").appendTo(marker);
if (i===0){
marker.addClass('active');
}
marker.appendTo($(".dots"));
});
allSlides.wrapAll('<div id="moveSlide"></div>').css({'float' : 'left','width' : slideW});
$('#moveSlide').css('width', slideW * numberOfSlides);
$('body').prepend('<li class="controls" id="clickLeft"></li>')
.append('<li class="controls" id="clickRight"></li>');
$('.controls').click(function(){
moveSlide(this);
moveSlide(this); // running twice because the function is being called twice
//create a function that says if button 1 is clicked run the function 1 time if button 3 is clicked run the function 3 times..
});
var moveSlide = function(thisobject){
console.log('function run');
if(($(thisobject).attr('id')=='clickRight')) {
if(currentSlidePosition == numberOfSlides-1)currentSlidePosition=0;
else currentSlidePosition++;
var active = $(".active").removeClass('active');
if(active.next() && active.next().length){
active.next().addClass('active');
} else {
active.siblings(":first").addClass('active');
}
} else if($(thisobject).attr('id')=='clickLeft'){
if(currentSlidePosition == 0)currentSlidePosition=numberOfSlides-1;
else currentSlidePosition--;
var active = $(".active").removeClass('active');
if(active.prev() && active.prev().length){
active.prev().addClass('active');
} else {
active.siblings(":last").addClass('active');
}
}
$('#moveSlide').animate({'margin-left' : slideW*(-currentSlidePosition)});
}
});
</script>
</head>
<body>
<div id="slideContainer">
<div id="slideWrap">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</div>
</div>
<ul class="dots"></ul>
</body>
</html>
It's more complicated than just calling the function a number of times. As the animation is asynchronous, you need to call the function again when the animation has finished, not right away.
Add a callback parameter to the function so that it can use that do do something when the animation finishes:
var moveSlide = function (thisobject, callback) {
Add the callback to the animation:
$('#moveSlide').animate({
'margin-left': slideW * (-currentSlidePosition)
}, callback);
Make a function moveTo that will call moveSlide in the right direction, and use itself as callback:
function moveTo(target){
if (target < currentSlidePosition) {
moveSlide($('#clickLeft'), function(){ moveTo(target); });
} else if (target > currentSlidePosition) {
moveSlide($('#clickRight'), function(){ moveTo(target); });
}
}
Bind the click event to the links in the dots. Use the index method to find out which slide you want to go to, and call moveTo to do it:
$('.dots a').click(function(e){
e.preventDefault();
var target = $(this).parent().index();
moveTo(target);
});
Fiddle: http://jsfiddle.net/Guffa/r5DY8/3/
From a purely logical point of view (assumes the existence of two variables - curr_slide_num and butt_num):
for (var i=0; i < Math.abs(curr_slide_num - butt_num); i++) my_func();
Be careful of zero indexing; either treat the first button and first slide as number 0, or neither, else the maths will break down.
This takes no account of the direction the slider should move. I haven't looked at your Fiddle but I guess you would pass direction as an argument to the function. Let's say the function expects direction as its first argument - the string 'left' or 'right'
for (var i=0; i < Math.abs(curr_slide_num - butt_num); i++)
my_func(curr_slide_num < butt_num ? 'left' : 'right');