I created a page to host some forms served by a limesurvey instance. For instance I used an iframe to embed them. But it created some problems. The worst is that in the second question group, which is smaller, the parent focus should go to the page top, otherwise the page appears clear because the form content was rendered on the top, and the iframe size was not resized.
Maybe it is just a limitation of mine dealing with iframe. But it would be nice if limesurvey offer other ways to embed surveys.
Any help is welcome.
I still don't know how to do it without Iframes on 2+ version.
The problem of multiple pages surveys standing on the bottom of the page can be handled with a small javascript workaround:
Edit the survey and add the following code at 'edit text elements' (toggle to 'source' mode at wysiwyg editor):
<a id="top" name="top"></a> <script type="text/javascript">
(function($) {
$(document).ready(function(e) {
window.location.hash = 'top';
});
})(jQuery);
</script>
Related
Scripts should be included in the <head> part is what I learned from w3c.
Why does Boostrap suggest to load itself in the <body> part as seen here:
http://getbootstrap.com/getting-started/#template
Scripts are technically supposed to be loaded and executed at where they are placed in the body. Imagine that your browser reads your HTML from top to bottom. If the script include is at the top of the document, then the browser is supposed to idle while it fetches the script from the web server.
A more detailed answer is available at
Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?
if the loading script is at the bottom of the body tage then it will be loaded last, making the rest of the page appear as if it is loaded faster
That really depends on that is on your page. If your page has things that need the js in order to work before displaying to the user, it would be wiser to load them before showing the html to the user
I have been working on a simple web site (one page at the moment) to display some basic information. This site also contains several links that refer the user to downloadable content (2 links to a PDF and one link to a zip file).
These links, like most of my page, are hidden using the display:none CSS attribute if the user cannot run JavaScript, which several features of the site require. A message is then displayed in the <noscript> tag to inform the user of why they aren't seeing the scripted content. This was all working perfectly when I previewed the files on my personal computer without hosting them.
My problem came after hosting on the site on GoDaddy.com. Now, whenever <noscript> is called upon (regardless of browser), every link from my site is pulled out and shoved in the upper-left corner where the user can see it. CSS styling does not appear to affect these links and I cannot figure out how to get rid of them.
How can I solve this? Most importantly, how to make the links go away unless I set them to visible again?
This is my <noscript> tag, at the bottom of the page:
<noscript>
<div class="scriptError">
<h1>Javascript is disabled!</h1>
<div id="noScriptNotice">
<p>This site works best with Javascript enabled. A 'noscript-friendly' version is currently in progress, but for now please enable Javascript to view the contents.</p>
</div>
</div>
</noscript>
Everything else (including links) is inside this div:
<div class="scriptedContent" style="display: none;">
<script>
//If scripting is enabled, display the site.
$(".scriptedContent").css("display", "block");
</script>
If it's working on your own localhost, but not Godaddy.com , you should first and foremost try to submit a support ticket to see if that provides any help.
The links that are re-appearing, see if you can apply this CSS style to the links that you are trying to hide:
font-size: 0;
text-decoration: none;
That should do the trick of hiding the links, that is, if your CSS is affecting them at all.
If not, try to "right click > view source" of the page, and then view and compare the source with your own.
Alternative if that does not work:
Try making your links (in the HTML code) something along the lines of:
Text
and seeing if that stops them from overriding your Styling.
I have several HTML pages that share a menu area. Every time I update the menu area (eg with new "breaking news") I need to update all 10 pages manually.
With frames, they all point to same frame page so I only need to change one page. But I was told frames are bad and I should use divs. Is there a simple way to do this with divs? (preferably without JQuery or Ajax)
You could use an iframe. It still is sort of a frame, but you would avoid a frameset-index-page and if you set borders to 0 and content that fits in you won't even see borders or scroll-bars and it will behave like a div
<iframe style="border-width:0px;" src="news.html"/>
You should use fixed width-heights though to avoid scrollbars. To me its the simplest "html-only"-solution to your problem.
You could use jQuery's load() function.
You'd have to add the following to the head of each of your pages:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Then you'd have to add the following DIV where you want the content to be loaded.
<div id="breakingNews"></div>
<script type="text/javascript" src="http://example.com/news.js"></script>
Be sure to edit the link to the news.js file.
Then you'd create the news.js on your server, and add the following code:
$('#breakingNews').load('path/to/breakingnews.html');
More about load():
http://api.jquery.com/load/
Not the nice solution, but if you really want to have single point of menu definition, include it in the script which includes setMenu function and you load the script in every page's head and call a setMenu function on every page's body onload, which then sets the menu as innerHTML of the div that you include in every page specifically as a menu placeholder.
Client side templating may be a solution if you are trying to avoid server side solutions for dynamically generating your content.
Using ICanHaz.js templating, http://icanhazjs.com/, you could store your html as objects. Then either include them directly as .js files, or make ajax requests for them.
I need to make a series of webpages. Each with a header coming from a website, and the content coming from an html page in my dropbox/public. I simple way would be to use frames, but they are deprecated.
As the html content is of different size. So the iFrame does not seem to be the right tool.
What alternatives do I have?
Many people seemed to suggest in the comments ajax with jsonp. Unfortunately I am completely new to those methods, so I would need an example to copy and then work with.
Thanks,
Pietro
You need to have the Jquery library in the main page. Copy the above code on the header of your page:
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
The make a div with the response id:
<div id="response"></div>
JQuery has an AJAX function called "load", this function is appended to a selector where you want a page to be loaded, in this case we want to contents of file "exemple.html" to load in the tag with id "response".
<script>
$(document).ready(function(){
// load exemple page when the page loads
$("#response").load("exemple.html");
});
</script>
Also you can load the content when a link from the main page is clicked:
<script>
$("#exemple").click(function(){
// load exemple page on click
$("#response").load("exemple.html");
});
</script>
For this you have to add on your HTML code a link with the id="exemple"
Click to load the exemple page
Hope this helps you!
Right now, I have a jQuery UI pop-up dialog that reads from an external page. This page reads from another external that has a video via flowplayer.
I'm using iframe to embed the video in the first:
<div id="donkeyVideo">
<iframe id="iframeDonkey" width="100%" height="496" src="../../../../video/donkey-2009-02-23.html" frameBorder="0"></iframe>
</div>
The width seems all right with 100%, but 100% height doesn't work. Is there a way around this?
Where and how do I embed the code, as well as the ID stuff. Please anyone, help?
You'll have to use some sort of JavaScript to dynamically adjust the height of an iframe if you want to use something like 100% rather than a pixel value.
Unfortunately, my understanding is that you cannot dynamically alter the height of an iframe that is pointing to a different domain than your own.
From lost-in-code:
jQuery : Auto iFrame Height
Please note that this jQuery autoHeight plugin will not work with iFrames accessing content from a different domain or remote location since the window object originating from a different domain cannot be accessed from the current one due to JavaScript security restrictions.
if you don't want to use a jquery plugin, you can do it simply using the method I've explained on my facebook post (https://www.facebook.com/antimatterstudios/posts/10151007211674364)
Do you have an IFrame, which you want to automatically set the height of because you're hosting a page from another website in yours.
Well, unfortunately the IFrame cannot take the height of the content you are loading and unless you put a height, it'll show either the default height, or no height at all. This is annoying.
I have the solution for you, it'll only work on recent, standard supporting browsers, but also works in IE8 too, so for about 99% of you it's perfect.
The only problem is you need to insert a javascript inside the iframe, which is easy if the content you are loading belongs to you, you can just open the content you're loading and put the javascript in the content.
In your website, you need a piece of javascript which can "receive a message from the IFrame", like this
jQuery(document).ready(function(){
jQuery(window).bind("message",function(e){
data = e.data || e.originalEvent.data;
jQuery("iframe.newsletter_view").height(data.height);
});
});
in your IFrame content, add this at the very bottom, probably it's ok to just do something like "$template.$javascript" using PHP or something, even if the javascript is not inside the tag
<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
parent.postMessage({
height:$(document.body).height()+50+"px"
},"*");
});
</script>
Obviously I am using jquery, you dont have to, it's just easier and probably you are using it, so save yourself the hassle.
if you do that, when the iframe loads, it'll send a signal back to the parent window, which will resize the iframe based on the length of the content :)
I'm sure you can figure out how to alter the little things, but thats the method I'm using