Make an html/java code on wix dissapear once clicked - javascript

I'm running into an issue, and I hope you can help me. ^^
First hello everyone! It's my first post so I'll try to make it as clean as possible^^.
I want to make an html/java code window to disappear once it's clicked , so the content behind it becomes accessible while the person still gets redirected to where they're suppose to (on a second page).
If that's not possible or too complicated, the other solution would be to open another window simultaneously, either replacing the original one, or opening a new page (a duplicate of the first page without html code).
Any idea how I could manage that? Knowing that I have no knowledge in code whatsoever. _' Also i should add that this is dedicated to mobile only, not that it would change a lot of things.
I have to add that my website is build on wix.
If anyone has an idea, or need more info, let me know.
here is part of the code:
<div id="app"> </div>
<script type="text/javascript">
(function(){
var App = {
android_id: '',
ios_id: '',
cat: '',
pbk: '',
cnt:'5',
mute: '',
creative:'managed',
subid:'',
pview:'',
display_mode:'min',
video_length:'',
parent_url:window.location.origin.toString()
};
var block = document.querySelector('#app')
var iframe = document.createElement('iframe');
iframe.style.width='100%';
iframe.style.border=0;
var src = 'https://example.net/widget/Index.html?v=2';
for (var param in App) src+='&'+param+'='+App[param];
iframe.src=src;
block.appendChild(iframe);
window.addEventListener("message", function(event){
var origin = event.origin || event.originalEvent.origin;
if (origin!=="https://example.net")return;
iframe.style.height=event.data+'px';
if(event.data=='noAds')block.removeChild(iframe);
}, false);
})();
</script>
By the way, this html/java wix code window covers a contact box.
Hope you can help me.
Best,
Lily

You could do something like this:
document.getElementById("app").addEventListener('click', false, function(){
this.hidden=true;
})
You can insert that into the javascript and it will make the app div disappear when you click on it. The other things you suggested aren't hard, if you make a more firm decision it would be easy to do what you're looking for.

Related

jQuery Dialogue Box Not Closing

I have a javascript/jQuery cookie confirmation box on my site as shown here: http://jsfiddle.net/x7rAk/1/
var checkCookies = document.cookie;
var cookieNotice = '<div id="continue_box" class="cookie_box"><p>This website uses cookies to improve the user experience. For more information on cookies please see this link. By clicking continue, you agree to the use of cookies.</p><p class="cookies_accept"><span class="cookie_button" id="continue"><img src="/images/tick.png"/><span> Continue</span></span></p></div>';
$('body').ready(function() {
$('body').prepend($(cookieNotice).fadeIn(2000));
});
var continueButton = 'span#continue.cookie_button';
var closeButton = 'span#close.cookie_button';
var closeNotice = '<div id="close_box" class="cookie_box" style="display:none"><p>You have agreed to the use of cookies. This allows us to bring you a better service by remembering your preferences.</p><p class="cookies_accept"><span class="cookie_button" id="close"><img src="/images/cross.png"/><span> Close</span></span></p></div>';
$('#continue_box.cookie_box').ready(function() {
$(continueButton).click(function() {
$('#continue_box.cookie_box').fadeOut(1000, function() {
$('body').prepend($(closeNotice).fadeIn(1000));
});
});
});
$(closeButton).click(function() {
$('#close_box.cookie_box').fadeOut(2000);
});
This is missing images and fonts etc. but it works exactly the same as on my site.
If you run the code, you will see that the box doesn't disappear when you click close.
First of all, how do I fix it, and secondly why does mine not work (I like to know why so I don't have to waste your time again :) ).
Thank you,
Connor
P.S. On my site it checks whether you have a cookie called cookiesAgree before showing it so the code is normally more sophisticated.
This should work
$(document).on("click", closeButton, function() {
$('#close_box.cookie_box').fadeOut(2000);
});
The content is being added dynamically, so you need to register the event handler.

focus back to parent object failing in latest version of chrome

background:
i have developed and maintain and a web based sales system using classic asp, javascript and sql server for internal use. to minimise my workload I restrict access to system so that only IE and Chrome browsers can be used.
problem
following latest chrome upgrade (Version 34.0.1847.116), routines that have been working perfectly are no longer working in chrome. IE is fine.
overview
i use parent to call child window. search for data in child, then return variables back to parent, which closes child, processes variables and updates parent form. I use this in lots of screens within the system and i find it provides a neat and intuitive UI.
However, from what I have read, Google Chrome has now restricted this functionality and there are no workarounds. It is such a useful function, I wanted to ask who uses pop up windows in this way and what solutions are there? Thanks so much in advance for your advice.
code
parent: calls new child window:
Add Customer
function upload(){
....
newWindow2 = window.open(newWindow2Ref, "custWin", features);
}
child: pop up to search and find customer and then passes back variable (custId) to opener giving field dummy1 the focus
opener.document.star.dummy1[<%=passedptr%>].value = "<%=custId%>";
opener.document.star.dummy1[<%=passedptr%>].focus();
parent: dummy 1 input gains focus and calls guestChanged function
<input name="dummy1" value="" type="readonly" onFocus="javascript: guestChanged(<%=nameCounter%>)" style="width:1px; height:1px; border:0">
function guestChanged(custPtr) {
if (newWindow2 && !newWindow2.closed) {
newWindow2.close();
counter = document.star.counter.value*1;
dummy1 = document.star.dummy1[0].value;
errorFlag = false;
...etc.
As I say, this is working perfectly in IE and until yesterday in Chrome :(
I hope I have explained the circumstances sufficiently well.
Thank you for taking the time to read this.
answered my own question with a shove in the right direction from #lankymart (thanks)
posted in case of interest to anyone running into same issue
parent:
<input name="passedGuestId" id="passedGuestId" onFocus="javascript: guestChanged(<%=nameCounter%>)">
<input type=button onclick="javascript:openwindow(0)" value="Add Customer">
<script language="javascript">
function openwindow(ptr) {
newWindow2Ref = "www.child.asp";
window.open(newWindow2Ref,"_blank","height=600,width=600,status=yes,toolbar=no,menubar=no,location=no")
}
</script>
child:
in my case, search on form in classic asp then run js, which closes window and returns value
<SCRIPT LANGUAGE="JavaScript">
<!--
window.opener.document.getElementById('passedGuestId').value="<%=custId%>"
window.opener.document.getElementById('passedGuestId').focus();
window.close()
// -->
</script>
parent
on return, input passedGuestId gets focus and calls guestChanged() Js to process the information returned
function guestChanged(custPtr) {
counter = document.star.counter.value*1;
dummy1 = document.star.passedGuestId.value;
errorFlag = false;
etc...

using onmouseover to change text hyperlink into an image hyperlink?

Please bear with me I am brand new to learning javascript (self taught)! I am usually one to find answers on my own from just web browsing but so far I haven't found any resources explaining how to accomplish the following:
So, basically all I want to do is change this (HTML):
SPEAKERS
to an image by using javascript.
The image is kept in the same folder as the html and the js.
Here is as far as I know to go with the javascript:
function showImage()
{
picture = new Image(100,100);
picture.src = "icon2.png";
document.getElementById("speakers").innerHTML = picture.src;
}
function goBack()
{
document.getElementById("speakers").innerHTML="SPEAKERS";
}
For clarity, all I would like to do is change the text ("SPEAKERS") to an image using 'onmouseover' while using the same hyperlink in the process.
It seems like a very simple problem but I don't know enough to determine if what I want to do is even possible. If it's not possible that's fine, I would just like to know either way ;P. Thanks ahead of time!
If you're ok with using jquery, you could use .html() and .hover()
http://jsfiddle.net/u8fsU/
Try something like this to get you started (not a complete nor tested solution):
var showImage = function(){
var picture = document.createElement("img");
picture.src = "icon2.png";
picture.href = "link.html";
var speakers = document.getElementById("speakers");
speakers.parentNode.replaceChild(speakers, picture);
}
Please see https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference for a good reference to some of the available DOM properties and methods.

AIR HTMLLoader window.open is not working

I have a web project developed in Flex which I have to make work standalone using AIR.
I created Air project and loaded the web application using flash.html.HTMLLoader.
The content is loading fine and working.
There are few buttons which open different links using javascript functions window.open.
The links are not opening. The javascript function is getting called using ExternalInterface and I placed alerts in that which is displaying.
The function contains simple window.open
window.open("http://www.google.co.in","Google");
I tried several solutions mentioned but none of them are working.
http://digitaldumptruck.jotabout.com/?p=672
http://soenkerohde.com/2008/09/air-html-with-_blank-links/
http://cookbooks.adobe.com/index.cfm?event=showdetails&postId=9243
I even tried loading a simple page in HTMLLoader component with window.open method still it is not working. On button click only alert is working but window.open is not opening the link.
<html>
<head>
<title>Test</title>
<body scroll="no">
<input type="button" value="Click" onClick="window.open('http://www.google.co.in');">
</body>
</html>
Could some one help me please
This is a radical suggestion that may or may not work, but I think it's worth a try.
Override the window.open method itself
As before, wait until the Event.COMPLETE is fired, then take it from there:
var html:HTMLLoader = new HTMLLoader();
var urlReq:URLRequest = new URLRequest("whatever.html");
var oldWindowOpen:Object; // save it, just in case
html.load(urlReq);
html.addEventListener(Event.COMPLETE,
function (event:Event):void {
oldWindowOpen = html.window.open;
html.window.open = asWindowOpen;
});
function asWindowOpen(href:String, name:String="_blank", specs:Object=null, replace:Object=null):void {
var urlReq = new air.URLRequest(href);
air.navigateToURL(urlReq);
}
You should probably fill out some of the function to handle the other inputs as specified in the W3Schools Reference for Window open() Method. You may have to (or want to) change all the parameter types to Object, just to be safe, since, unlike ExternalInterface interactions, the JavaScript-ActionScript types are not automatically typecast across the AIR-WebKit exchange.
The AIR Webkit environment is quite restrictive in its support for the window.open method. See Adobe documentation on Restrictions on calling the JavaScript window.open() method.
The easiest way to deal with this is just let the system's default browser open the links. Adobe documents this very question, and shows how you can pop open url's from within AIR:
var url = "http://www.adobe.com";
var urlReq = new air.URLRequest(url);
air.navigateToURL(urlReq);
Generalizing this:
function openExternalLink(href:String):void {
var urlReq = new air.URLRequest(href);
air.navigateToURL(urlReq);
}
One option: Assuming you're running jQuery on the page, you could have all the links open externally as so:
var html:HTMLLoader = new HTMLLoader();
var urlReq:URLRequest = new URLRequest("whatever.html");
html.load(urlReq);
html.addEventListener(Event.COMPLETE,
function completeHandler(event:Event):void {
html.window.jQuery('a').click(clickHandler);
});
function clickHandler( e:Object ):void {
if (e.target && e.target.href) {
openExternalLink(e.target.href);
}
e.preventDefault();
}
For more on handling DOM Events in ActionScript, see the relevant Adobe Documentation.
None of that is tested, but hopefully it gives a rough outline.
Otherwise, if you are trying to do something fancy, like pop up AIR windows with HTMLLoader frames in them, I did find one blog post discussing that: Opening links in AIR’s HTML loader

Automatically rotate through content

I have 7 graphs that are accessible to me through a web site. I want to develop my own web application that automatically cycles through each of these graphs, so I can display them on a huge monitor.
I want the functionality to be similar to an image carousel but it would be for web pages instead of images. What are my options? A jQuery plugin? AJAX and an iframe? Keep in mind that I want the data to be live while I display it.
You could use javascript, and a Frame with a simple timer to load it.
Nothing complex needed,
In the title frame set add this:
<script language="JavaScript">
var toShow;
var URL = new Array ('http://www.google.com','www.yahoo.com','www.bit.ly');
function setupTimer() {
toShow = 0;
loadNext();
var t=setTimeout("loadNext()", 3000);
}
function loadNext(){
parent.reportframe.location=URL[toShow];
toShow++;
if (toShow>3) toShow = 0;
}
</script>
<body onLoad="setupTimer()">
Then it will keep reloading the frames.
I just wrote this, did not test it, let me know if you need more help.
http://jsfiddle.net/5dazE/5/show
That's a basic slideshow. You can add or remove sites and then press play. It will rotate every 30 seconds. the code can be fond here: http://jsfiddle.net/5dazE/5
it could use more work, but I am in agreement with #nycynik. It is a great idea.

Categories