How to remove extra space in an iframe generated DOM? - javascript

I am displaying an iframe on my web page. However there is extra space like in the generated DOM. How can I remove it? I used jQuery like this. Didn't work. Thanks.
jQuery
jQuery(document).ready(function () {
let $iframe = $("iframe[name=previewIframe]");
$iframe.on('load',function() {
$iframe.contents().find("body #gwd-ad").text().replace(/\s+/g, " ").trim();
});
});
HTML

Try this:
$iframe.on('load',function() {
var $ad = $iframe.contents().find("#gwd-ad");
$ad.html($ad.find("a").html())
});

Related

How to automatically click a href link when the page loads?

I'm trying to automatically click a href link when the page loads.
<div class="loadmore" kind="rb">
تحميل المزيد...
</div>
The link is supposed to load more comments when you click it.
I tried this:
window.onload = function() {
autoloadmore()
};
function autoloadmore() {
var loadmoreClass = document.getElementsByClassName("loadmore")[0];
var loadmoreChild = loadmoreClass.getElementsByTagName("a");
if(loadmoreClass){
loadmoreChild[0].click();
}
}
but it doesn't seem to work. The problem seems to be with click(), because when I use other codes such as .style.color, they work.
I'm using Blogger by the way.
This's a sample blog:
http://blog-sample-001.blogspot.com/2018/09/title.html
(go to تحميل المزيد...)
ps: I can't change the div.
Assign some ID to تحميل المزيد... . For example, clickAfterPageLoad or whatever you want, and then try this...
$(document).ready(function() {
$("#clickAfterPageLoad").trigger('click');
});
or if you cant't change div, you can do like this:
$(document).ready(function() {
$(".loadmore a").trigger('click');
});

rename or replace all urls in html file per javascript

I have a jquerymobile web app and want to keep all existing hundreds of different external url links in the html file like
Link
but want to make them behave like this:
<a href="javascript:intel.xdk.device.launchExternal('http://www.example.com');">
How would I do that (without search and replace) with a script?
Thanks a lot for your help.
I suppose you want to add an event handler for all links, like this:
$(document).on('click', 'a', function() {
this.href = "javascript:intel.xdk.device.launchExternal('" + this.href + "');";
});
The job will be done only when the link is clicked.
Or, thanks to bencol:
$(document).on('click', 'a', function() {
javascript:intel.xdk.device.launchExternal(this.href);
return false;
});
If you can use jquery or jquery mobile, use this to replace all links
$(function() {
$("a").each(function() {
$(this).attr("href", "javascript:intel...('" + $(this).attr("href") +"')");
});
});

Insert HTML into DIV with Jquery

This is one of my first jquery scripts. I want to expand a DIV and load some external html into it. This is the code I have so far:
http://jsfiddle.net/spadez/uhEgG/5/
This is the code I have:
$(document).ready(function () {
var loadUrl = http://sheldonbrown.com/web_sample1.html
$("#close").click(function () {
$("#country_slide").hide();
});
$("#country").click(function () {
$("#country_slide").show();
$("#country_slide").html(ajax_load).load(loadUrl);
});
});
The expanding did work but now it doesn't since adding the Ajax code. Can anyone show me hwere I am going wrong, and ideally highlight any thing I am doing wrong. Thank you.
Just replace country click with this
$("#country").click(function () {
$("#country_slide").show();
$("#country_slide").load(loadUrl);
});
and add quotes on url
var loadUrl = "http://sheldonbrown.com/web_sample1.html";
Fixed it for you..
var loadUrl = 'http://sheldonbrown.com/web_sample1.html';
http://jsfiddle.net/APkHN/1/
your URL was not a string, and it was missing an end brace.
put your url inside ''
see it working here --> http://jsfiddle.net/uhEgG/8/
Also, you might need to delegate close like this (As you are replacing html inside #country_slide which contains your #close)
$("#country_slide").on('click','#close',function () {
$("#country_slide").hide();
});

how to create onclick for a link

i have a div for which i set value dynamically during run time, if there is value than i have enable or create a link which will have onclick method where i will call a javascript method.
how to do this in jquery or javascript?
I set value to a div like the following,
document.getElementById('attachmentName').innerHTML=projectInforamtionMap.Cim_AttachmentNames;
this the div :
<tr>
<td align="left"><div id="attachmentName"> </div></td>
</tr>
Kindly help me to find and fix.
Best Regards
You can set a onclick function:
document.getElementById('attachmentName').onclick = function() {};
Assume that your function are previously define like this
function foo(){alert('function call');}
After adding innerHTML
In Javascript
document.getElementById('attachmentName').setAttribute('onclick','foo()');
In Jquery
$("#attachmentName").attr('onclick','foo()');
You have several alternatives
JavaScript:
// var elem = document.getElementById('attachmentName');
elem.onclick = function() {};
elem.setAttribute('onclick','foo()');
elem.addEventListener('onclick', foo, false); // The most appropiate way
jQuery:
// var elem = $('#attachmentName');
elem.click(foo);
elem.on('click', foo);
$('body').on('click', elem, foo);
Between the 3 jQuery alternatives, the last is the best one. The reason is due to the fact that you are attaching an event just the body element. In this case, it does not matter but in other cases, you are probably willing to attach the same event to a collection of elements, not just one.
Therefore, using this approach, the event is attached to the body but works for the elements clicked, instead of attaching the same event to every element, so it's more efficient :)
$('#attachmentName').click(function(){
//do your stuff
})
jquery way:
$("#attachmentName").click(function() {
some_js_method();
});
You can do this without inserting link in the div in following way
document.getElementById("attachmentName").onClick = function () {
alert(1); // To test the click
};
You can achieve it with the help of jQuery as well in the following way.
$("#attachmentName").click(function ()
{
alert(1);
});
for this you have to include jQuery liabray on the page. refer jQuery.com
Still if you forecefully want to include the link in Div then following is the code for it
var link = $("<a>"+ $("#attachmentName").text() +"</a>");
$("#attachmentName").html($(link);
link.click(function () {
alert(1);
});
Hope this would help.
as i was converting a classical asp details page to a one-page ajaxified page, i converted the existing links in the page to get the details loaded in the DIV in the same page. i renamed the href tag to dtlLink and got that data in the jquery load() function.
detail.asp (server.urlencode is added and required here )
<a href=""#"" onclick=""javascript:LoadDetails(this)"" dtllink="detail.asp?x=" & Server.URLEncode(Request("x"))&y=" & Server.URLEncode(Request("y")) > link text </a>
parent.asp (it has some extra code for holdon.js spinner image, button enable/disable, results div show/hide)
Jquery
function LoadDetails(href) {
//get the hyperlink element's attribute and load it to the results div.
var a_href = $(href).attr('dtllink');
console.log(a_href);
$('#divResults').html('');
DisplayHoldOn();
$('#divResults').load(a_href, function (response, status, xhr) {
$('#divCriteria').hide();
HoldOn.close();
if (status == "error") {
var msg = "There was an error: ";
$("#divResults").html(msg + xhr.status + " " + xhr.statusText);
$('#divCriteria').show();
$("#cmdSubmit").removeAttr('disabled');
}
});
}

jquery and javascript conflict

I am using jquery in the master page and javascript in the content page. When Jquery is used alone it works fine. But when I use the javascript(content page) along with jquery(master page) then jquery in master page stops working.
master page script
$(document).ready(function() {
// set up the accordion
$("#accordion>h3").click(function() {
$(this).next("div").slideToggle(500).siblings("div").slideUp(500);
});
// show active menu section
setTimeout('$("#accordion>div.activesec").slideToggle(800)', 100);
});
content page script
$('slideshow').style.display = 'none';
$('wrapper').style.display = 'block';
var slideshow = new TINY.slideshow("slideshow");
window.onload = function () {
slideshow.auto = true;
slideshow.speed = 5;
slideshow.link = "linkhover";
slideshow.info = "information";
slideshow.thumbs = "slider";
slideshow.left = "slideleft";
slideshow.right = "slideright";
slideshow.scrollSpeed = 4;
slideshow.spacing = 5;
slideshow.active = "#fff";
slideshow.init("slideshow", "image", "imgprev", "imgnext", "imglink");
}
I believe the collision is caused by your use of the $ shorthand in the content page. $ is used to represent jQuery. So, jQuery is trying to interpret $('slideshow').style.display , which is not valid jQuery.
Replace your shorthand with document.getElementById, or use jQuery selectors.
Standard JS
document.getElementById.style.display = 'none';
Or jQuery
$('slideshow').css('display', 'none');
Ok, so it looks like the other script uses $, just like jQuery. You need to use $.noConflict() to prevent namespace clashes:
var $j = jQuery.noConflict();
$j(document).ready(function() {
// set up the accordion
$j("#accordion>h3").click(function() {
$j(this).next("div").slideToggle(500).siblings("div").slideUp(500);
});
// show active menu section
setTimeout('$j("#accordion>div.activesec").slideToggle(800)', 100);
If you don't want to use $j instead of $ in all jQuery functions, you can wrap everything (except the content page scripts!) in a function that assigns $ to jQuery:
(function( $ ){
// everything inside works normally with $
})( jQuery );
it looks like your selections are missing "#" or "." depending on weather your trying to access an id or class
$('#slideshow').style.display = 'none';
$('#wrapper').style.display = 'block';
You are passing a string to the setTimeout parameter. Really bad.
$('slideshow').style.display = 'none';
You are trying to find <slideshow> tags with jQuery, maybe you are missing a class or ID selector?
Also, the style method is not a jQuery method asfar as I know, so maybe you will want to call it on a JavaScript object instead of a jQuery one? Or perhaps use the .css method on it?
Did u put ur plane javascript inside the :
$(document).ready(function() {
});
If yes then try to put them outside it.
Best practice would be to put all your Javascript/Jquery code in a .js file. Then import this .js in the page that need it.
This way your HTML will be clean and not cluttered with javascript all over the place.
I know i don't really answer your problem, but working this way you will probably help avoid it.
good luck

Categories

Resources