Till now we are using Iframe to load HTML and script to show the form to the user.
Now, we want to move from Iframe to DIV, but here we have a problem with script.
Because Iframe is responsible to apply the loaded script to the only iframe, but coming to div script will be loaded into entire HTMLDocument.
Is There any way that loaded script can be applied to that specific DIV only?
Thanks.
First, change your <iframe></frame> to <div></div> after this, you have this way to do this for your CSS(to a certain div):
#projectName{
style:value;
}
#divAnnounce{
}
The # targets things with ID's if you use a . before it will target the class names,
You can also use both if you need to get specific such as
#idname.classname{
}
If you have another div inside of the divAnnounce you can do
#divAnnounce #yournewdiv{
}
OR
#divAnnounce div{
}
OR
#newdivid{
}
Notice the space inbetween the two targets saying that they are a parent and child.
For your javascript I don't know with you are using plain javascript or jQuery
if it is jQuery then you can use jQuery noconflict. Create separate aliases to use jQuery for example to div1 & div2
Simple Example:
<script>
var div1Alias = $.noConflict();
var div2Alias = div1Alias.noConflict();
jQuery(document).ready(function(){
alert(div1Alias( "#div1" ).html());
alert(div2Alias( "#div2" ).html());
});
</script>
Try to do this changes in your code and let me know if it helps :)
Related
I would like to hide a HTML Form before even the page loads using javascript.
I was able to use display='none' style property to hide the form using javascript but the form content loads visible for a second before disappearing.
var searchbar = document.getElementById("searchform");
searchbar.style.display = 'none';
I have read many solutions in stackoverflow adding some css code in the page and display the content later using removeClass.
Problem is I do not have access to code behind the web page to add the CSS content. However I can add some custom javascript code only in header or a footer.(cannot use jQuery as well).
Please let me know if its possible hiding the form element as expected.
I am quite new to javascripting. Please provide your valuable suggestions.
edit: Sorry, if you only can use some javascript and cannot access the html or css there is probably no solution for your problem.
You can store all you form in a javascript variable, and write it in your div when the page is ready
Simple example :
function showForm(){
var container = $('#formContainer');
var form = '<input type="text" name="myInput">'; // Or you can load it from an external file
container.html(form);
}
$(document).ready(function(){
showForm();
});
But the best way is adding a css rule to hide your form, and show it when the page is loaded.
Web browser first render HTML. It takes time, while browser download css or js file. Best apprach would be to use inline display='none', not in css file.
<form style="display:none;">
...
</form>
I have a menu in Wordpress and I want to hook up Appointlet script to it. The code is here:
(function(e,t,n,r)
{
if(e)return;
t._appt=true;
var i=n.createElement(r),s=n.getElementsByTagName(r)[0];
i.async=true;i.src='//dje0x8zlxc38k.cloudfront.net/loaders/s-min.js';
s.parentNode.insertBefore(i,s)
})
(window._appt,window,document,"script")
<div data-appointlet="tfracine">
</div>
My idea is to create menu item with blank name, get its id (for example, "#menu-item-66"). Then add my code in front of it using jQuery function.prepend().
So I created custom js file, included it in the header.php file and the code inside the file was this:
$(document).ready(function(){
$( "#menu-item-66" ).prepend( "Test" );
});
I started with the word "Test" to figure out if it works.
Unfortunately, nothing happened and I have lack of skills to figure out why. Any suggestions or smarter way to do it?
The jQuery .prepend() function will prepend a jQuery element, not a string.
So, you have to create a jQuery element by doing:
var newElement = $('<p>New Element</p>');
In your case, what you could do is:
$(document).ready(function(){
$('#menu-item-66').prepend($('<p>This is a jQuery element</p>');
});
For a complete reference, check the .prepend() documentation out.
.prepend() and .prependTo() adds the specified content as the first child.
The question is bit not clear. Do you want to insert your script inside your
div ?
I have a rails partial that renders this html:
<div class="content"></div>
<script>
// load the content here and get the adjacent div and populate it.
</script>
This partial template gets embedded in the main document by the server and also several times as response to AJAX requests. So the page has several instances of this partial.
Whenever my script executes I want only the div adjacent to the script to be affected.
So I am hoping if I could get to the script, I can get to the div. I use jQuery as well and I also use several async scripts (this prevents me from using the last executed script)
I could get to the adjacent div through document.currentScript , the problem is some browsers don't support it.
Then, is the only way to do is to create some sort of a UUID ID for the div and access it by Id from the DOM?
I really wished div supported onload, but sadly not.
You can create the element immediately after the <script> (document.write) and find the .content relative to it.
(function(){
var id = 'id' + (new Date().getTime());
document.write('<div id="'+id+'"></div>');
var elem = document.getElementById(id);
var content = elem.previousElementSibling.previousElementSibling;
content.innerHTML = 'NEW CONTENT';
})();
Example jsbin
If each partial belongs to an ActiveRecord model, use dom_id function available in Rails - in the div and in the corresponding script.
Use jQuery replaceWith:
<div id="div_id" class="content"></div>
<script>
# on document load
$('#div_id').replaceWith(new_content);
</script>
<script>
function myFunction() {
if (/menu/.test(window.location.href)) {
document.getElementById('searchfield').display = 'none';
}
}
</script>
I would like to do this with JavaScript or JQuery -- thus far my attempts are not working. I have a div that is to be present on all pages but 1 page; in which I would like to hide it with JavaScript if that page.
Note: This is a Wordpress website; the above was inserted in the header.php head of the document. Same location of repetitive div.
This is easier with CSS.
HTML (make sure all of your pages have some unique identifier, generally on the body tag):
<body id="page-1">
<div id="menu">
[ ... ]
CSS
#page-1 #menu{
display:none;
}
Edit
I see you're working in WordPress. WP automatically adds unique classes to the body tag. Generally you can use something like this for your CSS:
.page.page-id-34{
/*
34 should be swapped with the page id.
You can customize the classes,
so just Inspect Element and see what it is for your page
*/
display:none;
}
myFunction is never called. You'll need to explicitly call it when the page is ready $(myFunction);, or if you want, call it in the footer (or close to it) directly with myFunction();.
An alternative, since this is a WordPress site, is to add PHP code to not show that div (or even send it to client!) based on a filter.
Another alternative is using CSS to block out that specific div on the page that's loaded.
I have a popup window working with the following code, but I need to amend it to apply a CSS class to either the HTML tag or the Body tag, so I can style the popup window differently than the normal site.
Here's the code I'm currently using:
<script language="javascript" type="text/javascript">
<!--
/****************************************************
Author: Eric King
Url: http://redrival.com/eak/index.shtml
This script is free to use as long as this info is left in
Featured on Dynamic Drive script library (http://www.dynamicdrive.com)
****************************************************/
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);
}
// -->
</script>
I tried to add a line right after the win=window.open line that looked like this:
win.document.getElementById('body').className += " popup";
Unfortunately it didn't work. Any ideas on how I can make it so if a window is popped up using this javascript function it'll apply a CSS class to the window?
The HTML call to the function was with this code, if it matters.
<li>Play in pop up | </li>
Alternatively I've tried using this jquery version of a popup window (http://swip.codylindley.com/popupWindowDemo.html), but haven't figured out how to do it this way either. Thank you so much for your help, this has been killing me all day!
As you can see u are trying to reach object with id='body'.
However i think that your markup looks like
<body> ... </body>. If that's true then You can't use JS function getElementById because You have no ID on body element :)
The solution would be <body id='body'> ... </body>
Also You can use different JS function to select the body.
var body = document.getElementsByTagName( "body" );
win.document.getElementById('body')
will look for DOM element which matches the provided ID and in this case there is no element whose ID is body.
try to replace this with win.document.getElementsByTagName('body'). this should give you the body tag then you can apply the CSS class to it.
Since you will only have one body in your document you can directly assign the class to body tag in popup HTML itself.