Hi, thanks for your code, im an amatuer and i wanna use it into my website, can u help me undrestand how and where should i put this code to work correctly? and i want it to show just an image in a frame when page loaded, i appreciate if you help me out, i was looking for the answer like a week now and still nothing…
Welcome to the forums, @arash72af.
Did you read the article about how to implement this?
If so, and you’re still having problems, it would be helpful if you can say exactly how far you managed to get and what your exact issue is.
2 Likes
Hi.
I’m new on web developing.
I need a sample code that displays a clickable image in the lightbox on page loading with a close button. Also, if there’s a way, I need it to show on desktop browsers only (avoiding any mobile), and display 5x per day per user IP.
Can someone help?
Thanks.
Hi,
That’s nice. What have you tried?
Tried a lot of codes, but didn’t worked. I won’t put any here because i’m pretty amateur. =/
Ok, on the one hand, that shouldn’t be a barrier to learning. On the other if you’re “pretty amateur” you’ll want to start off by breaking the problem into smaller problems which can be solved more easily. Your initial post reads like “Give me the codez, all of them”, which I don’t believe anyone will.
Let’s take a slightly different tack. Did you read the tutorial on the main site and do you have that working correctly?
2 Likes
Hi all. I have been reading these posts over the past few days and trying to get my popup to work well. I have the actual popup that I made using Kendo but I cant for the life of me figure out how to get it to display only once every 24 hours. Any help that you can give me would be greatly appreciated. I have included the code that I have so far below. Thanks for the help.
Lorenzo
<link rel="stylesheet" href="https://www.albemarle.org/upload/images/kendo/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://www.albemarle.org/upload/images/kendo/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://www.albemarle.org/upload/images/kendo/styles/kendo.default.mobile.min.css" />
<script src="https://www.albemarle.org/upload/images/kendo/js/jquery.min.js"></script>
<script src="https://www.albemarle.org/upload/images/kendo/js/kendo.all.min.js"></script>
<div id="example">
<div id="window">
<div class="armchair">
<img src="http://www.albemarle.org/upload/images/pictures/departments/county_executive/pictures/Web-Survey-Entering.png" />
<p><a href="Survey Link Here" class="k-button">Take Survey</a></p>
<button class="k-button close-button">Close Window</button>
</div>
</div>
<!--<span id="undo" style="display:none" class="k-button hide-on-narrow">Click here to open the window.</span> This will put a button on the screen so open the survey again-->
<div class="responsive-message"></div>
<script>
$(document).ready(function() {
var myWindow = $("#window"),
undo = $("#undo");
undo.click(function() {
myWindow.data("kendoWindow").open();
undo.fadeOut();
});
function onClose() {
undo.fadeIn();
}
myWindow.kendoWindow({
width: "660px",
height: "350px",
title: "Albemarle Website Survey",
modal: true,
resizeable: false,
scrollable: false,
visible: false,
}).data("kendoWindow").center().open();
$(".close-button").click(function(){
$(this).closest("[data-role=window]").data("kendoWindow").close();
});
});
</script>
<style>
#example
{
min-height:500px;
}
#undo {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
}
.armchair {
float: left;
margin: 30px 30px 120px 30px;
text-align: center;
}
.armchair img {
display: block;
margin-bottom: 10px;
}
@media screen and (max-width: 1023px) {
div.k-window {
display: none !important;
}
}
</style>
</div>
Hi,
Use a cookie. This is explained in the tutorial summarizing this thread.
Thank you for the advice. I, cheated, used the tutorial that you sent me and I wasnt able to get it to work properly. The popup still works fine but everytime I refresh the page It comes back up. Can you point me to the right spot in my code to focus on so get this working.
Thank you again,
Lorenzo
<!--<span id="undo" style="display:none" class="k-button hide-on-narrow">Click here to open the window.</span> This will put a button on the screen so open the survey again-->
<div class="responsive-message"></div>
<script>
$(document).ready(function() {
var myWindow = $("#window"),
undo = $("#undo");
undo.click(function() {
var popupShown = Cookies.get('colorboxShown');
if(popupShown){
console.log("Cookie found. No action necessary");
} else {
myWindow.data("kendoWindow").open();
undo.fadeOut();
}
});
function onClose() {
Cookies.set('colorboxShown', 'yes', { expires: 1 });
undo.fadeIn();
}
myWindow.kendoWindow({
width: "660px",
height: "350px",
title: "Albemarle Website Survey",
modal: true,
resizeable: false,
scrollable: false,
visible: false,
}).data("kendoWindow").center().open();
$(".close-button").click(function(){
$(this).closest("[data-role=window]").data("kendoWindow").close();
});
});
</script>
<style>
#example
{
min-height:500px;
}
#undo {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
}
.armchair {
float: left;
margin: 30px 30px 120px 30px;
text-align: center;
}
.armchair img {
display: block;
margin-bottom: 10px;
}
@media screen and (max-width: 1023px) {
div.k-window {
display: none !important;
}
}
</style>
</div>
Are you opening the file directly in your browser, or are you using a server? With chrome (for example), you cannot create cookies locally, so will need to use a server.
If that’s not the case, could you post a link to a (minimal) demo where I can see this not working for you? Or make a CodePen.
I am putting this directly on our website on a test page that we created. Its a wonderfully old software called QPublishing that we use to manage our site. So I update the site and then refresh the webpage to see my progress. I am using chrome to test the page, but I am not opening the code directly to chrome. I am updating it on the server first.
Here is a link to my test page: https://www.albemarle.org/testalex.asp?department=visitors
Look at the console (F12 > Console tab in Chrome). There are a bunch of errors there that need fixing. For example you are loading a script that relies on jQuery (decisiontree.js) before loading jQuery itself. That can’t end well …
Thank you again for all of your help. This was thrust upon me and I am learning as I go. I got the proper, at least I think, jQuery.js files put in the right places and it isnt throwing 404 anymore but I am getting a “Get” error. Do you know where I can find an explanation as to what the console is returning to me and what it means? Also, do you know where I can find the css images that it is talking about?
Hi @lwells - your test page isn’t loading for me, is it down?
im not sure what I just did but now the only thing that comes up is the grayed out screen. I have been trying to make sure the scripts are in the places they are being called from.
Sorry, but thanks for taking a look.
@fretburner I got it back working. Thank you for taking a look.
Alright, I was able to fix a bunch of the errors that were showing up and they actually helped me with some of the work arounds I had made, like the close button at the bottom, which is nice. but I have these few that I cant figure out.
I’m still not able to access the site using the URL you provided - the page just times out eventually.
Judging from the errors in the screenshot you posted, it looks like you probably need to move the script tag that includes jQuery above the other JS scripts (like decisiontree.js) so that it is loaded first.
hmm. I am not sure why it isnt showing up for you. I have tried it in 3 different browsers now and it has worked for me. I really dont want/need another problem to fix with this. As for the order of them being loaded, I dont even know what it calling to decisiontree.js but I moved the scripts to the top and also moved the one script that I was calling from another webserver to ours. These are the things I am loading:
<script src="https://www.albemarle.org/upload/images/kendo/js/jquery.min.js"></script>
<script src="https://www.albemarle.org/upload/images/scripts/js/js.cookie-2.1.3.min.js"></script>
<script src="https://www.albemarle.org/upload/images/kendo/js/kendo.all.min.js"></script>
<script src="https://www.albemarle.org/upload/images/kendo/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://www.albemarle.org/upload/images/kendo/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://www.albemarle.org/upload/images/kendo/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://www.albemarle.org/upload/images/kendo/styles/kendo.default.mobile.min.css" />
Here is what I have so far, since it isnt letting you bring it up in your browser:
Link to CodePen: YpGRVp