Newbie question here. I have searched a lot and found different parts of the solution but I cannot work out how to put everything together. I hope you can help me.
I need to add a link to my site which will open a new window with specific size in the bottom right corner of the screen. I found this code doing exactly that:
<a onClick="openWindow(); return false;"http://www.example.com">Ask your question!</a>
<script>
var topsss=screen.height-500;
var left=screen.width-400;
function openWindow() {
window.open("http://www.example.com", "_blank", "toolbar=no,scrollbars=yes,resizable=yes,top="+topsss+",left="+left+",width=400,height=500");
}
</script>
Within the new window I don't want to show mysite.com but I need an iFrame showing the content.
I managed to get a new window with the iFrame but the content is not showing in the iFrame:
<script>
function myFunction() {
var myWindow = window.open("", "MsgWindow", "width=420,height=515");
myWindow.document.write('<iframe width="400" height="500" src="http://www.example.com"
frameborder="1" allowfullscreen></iframe>');
}
</script>
Can you help me to put this all together and make this work?
Thanks for your help!
//Manon
I guess that you want to display a form for the user to fill, instead of opening new page for that.
Would it be possible to contain that form/page for all of your pages and have CSS trick to show/hide it? I know it's not what you are asking but the iframes and new pages could just cause you problems, cross-domain-scripting, and overall iframe is controversila (some consider it dead and deprecated by html5). So there might be a more elegant way to do the same with just CSS/JS, you can do more conditions, more controls where it will be placed and what it will do (animations, effects, some interaction with your original page).
https://allyjs.io/tutorials/hiding-elements.html
If you are making a SPA style website then maybe you are not aware of SPA frameworks? There is a lot of JavaScripts frameworks doing these things for you:
https://en.wikipedia.org/wiki/Single-page_application
Related
This might be one of the more daft questions to ask,
but since
<iframe src="view-source:https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/Daymusic.html" width="800" height="600"></iframe>
doesn't work:
Is it possible to display a page's source inside an iframe?
(Or any other way really ??)
CLARIFICATION:
I know about the browsers built in "view source" function.
I want the page source being rendered without user interaction.
You could use javascript to fetch the page in question and escape the html.
As an example try using JQuery:
$.get('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/Daymusic.html', function(data) {
var x = document.createElement("pre");
x.id = "test"
$("body").append(x);
$("#test").text(data);
});
Or another example with iframe
Does anybody here knows how to implement a Splash Screen in SAPUI5? I have tried creating a page so that it would be the default page once the application is loaded, but there was an issue as to how to make it the default page even if another page is bookmarked. So what we did was use an image as the Splash Screen. Now the problem is the size of the image based on the device used.
Do you have any idea how we can implement this? Any idea would be of great help. Thank you so much! :)
Maybe Dialog control will fit your need?
Here is an example:
var oButton = new sap.m.Button({
text: "Hit Me To See Splashscreen",
press: function(){
var oDialog = new sap.m.Dialog({
stretch: true,
content:[
new sap.m.Text({text:"This is Splashscreen! Click Anywhere To Close the Splashscreen."})
]
}).attachBrowserEvent("click", function(){oDialog.destroy();});
oDialog.open();
}
}).placeAt("content");
And here is a working JSBIN example: LINK
I guess what you are looking for is a loading Animation on startup while loading libraries or backend-data: checkout this one, perfect guide! http://openui5.blogspot.com/2014/04/splash-screen.html
Thank you for your responses. I highly appreciate it. :)
Anyways, i didn't use an image nor a separate page. I just added a separate div in index.html which contains the image and the text. I added a script that will hide the div once the DOM Content is loaded.
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("splashScreen").style.display = "none";
document.getElementById("content").style.display = "block";
});
suppose my page content is huge so in my asp.net application i want to show busy icon with percentage downloading the content in client side. i saw many flash and sliver light site that they show busy icon and also they show percentage that means how much content has been loading in client machine. how could i achieve this using JQuery and when page content has been downloaded in client machine the busy icon goes out and actual page content will display.
please me with sample code to achieve it. thanks
You could have a placeholder image, and when the image you want is loaded, you could replace the placeholder with the new source
var img = new Image();
img.src= "largerImage.png";
img.onload = function() { oldImage.src = img.src; };
This could be taken a step further, and the code could be added to the image itself
<img src="http://www.codedigest.com/img/loading.gif"
onload="var t = this; var img = new Image(); img.src ='http://hardgeek.org/wp-content/uploads/2010/07/firefox-logo-1024x969.jpg'; img.onload = function() { t.src = img.src }" />
Which could also be taken a step further, as you might not always have the ability to apply the onload directly like this, just a suggestion.
I would recommend something like Uploadify. It does require a flash plugin. This is by far the easiest way.
http://www.uploadify.com/
Here is an example (ASP.NET MVC):
http://blog.bobcravens.com/2010/02/upload-files-with-progress-using-uploadify/
[Update] If you are trying to lazy load images, then use the jquery lazyload plugin. This only loads images that are in the current viewing area. As you scroll down, it fetches the next images. I use it on my blog page.
http://blog.bobcravens.com
View source and you will see (around line 13) a script that sets lazy loading on all post images.
Bob
net website, I would like to add button by which user can view the page in Full Screen mode and switch back to Normal mode. [This is same as happens with F11]
I have seen many javascript code but all of them is opening new window in full screen.
But i would like have same window in Full screen
If it happn then i will put that button in MASTER page.
Please help?
I don't think it is possible to do what you are asking.
The only possible way is using window.open:
<span onclick="window.open('http://www.yourdomain.com/page.html','', 'fullscreen=yes, scrollbars=auto');">Open Full Screen Window</span>
(I'm not sure it's a good idea to force a user to use full screen mode...)
ugly solution but it works
<head>
<script type="text/javascript">
function max()
{
var obj = new ActiveXObject("Wscript.shell");
obj.SendKeys("{f11}");
}
</script>
</head>
<body onload="javascript:max()">
</body>
User already has this button, it's called F11.
DO NOT try to be 'smart'. This kind of functionality is in browser's scope, not in web application scope. It should not be your concern at all.
Instead focus on features that are truly relevant to your application.
Please refer to this page for reference: http://loadedgranola.valitics.com/_product_83484/blackberry_lime
I have a jQuery script that runs to replace the h1 tags with a background image. It works great when the document loads but when I click "add to cart", after the javascript alert the jQuery styling breaks. Due to CMS restrictions I have no direct access to their javascript or any of the ASP files but I assume there has to be an easy fix to this.
The code I'm using:
jQuery(document).ready(function(){
var textReplacer = document.title.replace(/ /g,'');
jQuery("h1").addClass('replaced').css("background","url(../images/h1/" + textReplacer + ".png) no-repeat 0 0");
});
I have also tried using the function pageLoad(sender, args) { magic but no luck.
Here you go ..
jQuery(document).ready( function() {
jQuery('<style type="text/css" media="screen">h1{text-indent:-9999px!important;background:url(../images/h1/'+document.title.replace(/ /g,'') +'.png) no-repeat 0 0!important;}</style>').appendTo('head');
});
what it does is add a new css rule that pushes the text way out of the box and adds the background image
Here is what is happening:
When you submit the shopping cart it's doing an AJAX call. The result of that call replaces most of the HTML on the page. Any changes you made before that get replaced.
Possible Solution
You would have to run that replace script again after the AJAX call is complete.
Questions
Why are you replacing the H1 tags on load? What problem are you trying to solve? You might be able to find a better CSS solution.