I will be using shopify's system so i am restricted to how and which pages i can edit.
I have one page that is an app but i want that page, on loading, to show a popup disclaimer before they can see the page.
I am told that i can't edit the app page itself but i can add javascript code in the common site footer to check current url and if it equals this certain page, then create a popup.
I have created a page that holds the disclaimer information so i would like the popup window to load this pages' content.
I believe i can load the content using this div tag
div id="popupinfo" pages.disclaimer.content div
I do not know how to add the if statement to check if current url = site.com app.html then div id="popupinfo" pages.disclamier.content div
This site uses their own language called Liquid, hence the double brackets..but any code to pull the content of an html page would work i am sure.
Can i please have some assistance in how i am to
check current page
if page = xxx
best way to create a popup window where the user has to click as yes or ok button
then display the regular page
Thanks in advance!
Brocour
It's only possible to open a pop-up window upon a user-action, for example a 'click' action.
if( document.URL === "myPage.html" ){
// Disclaimer alert
if (confirm('Do you agree to this Disclaimer?')){
// Redirect
window.location = "myNewPage.html";
} else {
// Do nothing
}
}
Try something like this:
<html>
<head>
</head>
<script type="text/javascript">
function poponload()
{
popupwindow=window.open("","mywindow","location=1,status=1,scrollbars=1,width=100,height=100");
popupwindow.moveTo(0, 0);
}
</script>
<body onload="javascript: poponload()">
This is the page
</body>
</html>
You could use the code in this example i made.
$(document).ready(function(){
$('#open_popup').click(function(){
popupwindow=window.open("http://google.com","mywindow","location=1,status=1,scrollbars=1,width=600,height=500");
})
})
Related
I am a little bit newbie in the web development.
I’m creating a simple web page with a Nav Tag navigation, but I’m not pretty sure which is the best way to redirect to another pages.
For example I have the menu: Home, Services, Contact and when you click in one of them you will go to a page with the properly information.
I have seen this structure:
<nav>
HTML |
CSS |
JavaScript |
jQuery
</nav>
But where do you go ? To another page or a section on the same page?
I would like see the same original page and when you click in one item of the menu only changes the bottom of the web page.
So what way do you recommend to do this ?
I hope you could help me, thank you so much.
Just add
"Any Text you want, in you case: "go to bottom""</l>
After this create class at the botton of the page with same id
<div class="bottom" id="ex1">
If you want to go to bottom by clicking to the link add javascript at the end of the .html file just before "/body" closes
<script type="text/javascript">
$(document).ready(function() {
$("a.go").click(function () {
var elementClick = $(this).attr("href");
var destination = $(elementClick).offset().top;
$('html,body').animate( { scrollTop: destination }, 700 );
return false;
});
});
</script>
If you want to redirect and go to another page, create html file in the same directory(same folder). Then add a link
"Any text you want, in your case: go to another page"
<html>
<script type="text/javascript">
function openWin(url) {
window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=200, left=300, width=870, height=650");
}
</script>
Content 2
Content 3
</html>`
this is my code to open to javascript popup. but when i click content 2 only one popup should open ` but here instead multiple popups are opening. and also parallely content 3 window should open in a diff window.
You don't want to supply javascript on the href attribute, instead use onclick.
Content 2.
Also, you are missing some necessary tags in your HTML document. You are missing the required body tag for example. You can check your document for syntax and to some extend semantic errors by using the W3C HTML validator.
I have created a html page with the following code in between "head" tags:
meta http-equiv="Refresh" content="5; url= contacts.html"
Now when the above code is added to a web page, It waits for 5 seconds and moves the contacts.html page. If you press the "back" button on your browser, the browser will take you to the previous page which is the "intro page" or the page that I have entered the above code.
But I need to stop that from happening(returning back to the intro page when the 'back' button on the browser is pressed). Is it possible to do so? If its possible, then how? o_O
You can use javascript to do this, but JavaScript isn't foolproof because someone could turn off their javascript and bypass your mechanism.
Add this inside your and add onload="preventHistoryBack()" to your -tag in your content.html:
<script type="text/javascript">
function preventHistoryBack() {
for(var i = 0; i < window.history.length; i++) {
window.history.back(i) = window.location;
}
}
</script>
<body onload="preventHistoryBack()">
This will replace the complete history of the browser with your current location. So when the user hits the back button, it will go to the same page as he is now.
Well, apparently there is no answer yet to the problem I have.
I made a website with an iframe.
In this iframe I display the pages activaded by the menu buttons.
Those pages are found by searchengines too.
But without the website these pages are "naked".
I want the following.
If the "naked" page has been found, automatically a call has been made to the parent page to dress the "naked" page. So the whole website will be visible and not the "naked" page.
Thanks4thinking with me.
You need to detect whether "iframed" child page is called directly, and if that's the case - redirect to the parent page. Below is a basic example how to do it in such child page:
<html>
<head>
<title></title>
<script type="text/javascript">
function checkIfInIframe() {
if (window == window.parent) location.href = 'Parent.html';
}
</script>
</head>
<body onload="checkIfInIframe();">
<!--Child Content-->
</body>
</html>
Here we call JavaScript function "checkIfInIframe" in page's body "onload" event. The code checks whether page is at top level (where it shouldn't be) or not. It does that by comparing "window" object to it's parent' If it's the same object - page redirects to it's parent. You can even pass parameters in a Query string in that redirect so parent would automatically know which page to open in the Iframe
How to make tabs on the web page so that when click is performed on the tab, the tab gets css changed, but on the click page is also reloaded and the css is back to original.
dont use the jquery :D
all of what you needs a container, a contained data in a varable and the tabs
the container is the victim of the css changes.
the tabs will trigger the changing process.
if you have a static content, you can write this into a string, and simply load it from thiss.
if you have a dinamically generated content, you need to create ajax request to get the fresh content, and then store it in the same string waiting for load.
with the tabs you sould create a general functionusable for content loading.
function load(data) {
document.getElementById("victim").innerHTML = data;
}
function changeCss(element) {
//redoing all changes
document.getElementById("tab1").style.background="#fff";
document.getElementById("tab2").style.background="#fff";
element.style.background = "#f0f";
}
with static content the triggers:
document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))};
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};
if you want to change the css, you need another function which do the changes.
i tell you dont use the jquery because you will not know what are you doing.
but thiss whole code can be replaced by jquery like this:
$("tab1").click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 1");
});
$("tab12click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 2");
});
if you know how javascript works then there is noting wrong with the jquery, but i see there is more and more people who just want to do their website very fast and simple, but not knowing what are they doing and running into the same problem again and again.
Jquery UI Tabs:
http://jqueryui.com/demos/tabs/
Have a <A href tag around the "tab" and use onClick to fire some Javascript that changes the CSS.
If you do not want use Jquery for creating of UI tabs, please see my cross-browser JavaScript code: GitHub.
You can use different ways to create tabs and tab content.
Tab content can added only when tab gets focus.
You can remember selected tab. Selected tab opens immediatelly after opening of the page.
You can create tabs inside tab.
Custom background of the tab is available.
Example: Tabs