Trying to remove an element from a 3rd party script that loads a couple iframes after everything on the page is loaded, and for some reason, my code does not work.
jQuery(window).ready(function() {
jQuery('.sharefooter-modern')
.css("display", "none");
console.log("removed2");
});
I've tried window onload, document ready and some other things but the code still gets triggered before everything is actually loaded.
Html I am trying to remove:
<div class="sharefooter-modern">
It is loaded in iframe with new html body
Full html with iframe https://codepen.io/anon/pen/LzMbmN I am trying to remove the piece with "Viral Loops"
Hi try this the commented one is the way, if you got multiple div class .sharefooter-modern and you want to display none only the 3rd and the other is to close all or one of them. Regards.
jQuery(window).ready(function() {
//jQuery("#component").contents().find('.sharefooter-modern:nth-child(3)').css("display", "none");
jQuery("#component").contents().find(".sharefooter-modern").css("display", "none");
console.log("removed2");
});
Apparently, there is nothing I can do to hide the element due to cross-origin policy, but I fixed my specific issue using another approach - I placed iframe in div with fixed height to cut the bottom and set overflow:hidden. Hope it will help someone.
Related
Point
The code I have here is from my "operating system" I'm trying to create inside a browser by putting iframes in AppWindows with PHP code as the backend or the (main program process).
Now in every GUI system you have the ability to move windows, stack one on top of each others and such, but I'm not able to do efficiently in HTML using jQuery & jQuery-UI.
I'm using draggable() and some tricks I've found on StackOverflow to be able to bring the div AppWindow on top.
The problem
The code for bringing the **AppWindow** on top works fine but the problem is the iframe inside that window gets reset, because what this code is doing is that it stacks the current div as the first div above all the others inside the parent container.
If you notice the AppWindow 1 iframe blinks when you click on that window, I don't want that.
Code (jQuery)
$(function() {
// Don't know what I'm doing with iframe here...
$('.AppWindow iframe').click(function(){
$(this).parent().child.parent().append(this);
});
$('.AppWindow').click(function(){
$(this).parent().append($(this));
});
$('.AppWindow').draggable({handle:".DragHandle"});
});
Conclusion
If there is a way of preventing this from happening feel free to write an answer below. If you have a better way such as "JavaScript OS UI Framework" or something like that you're even more free to write below.I want something like **os.js** or **windows93.net** type of thing. All I need is a working taskbar, working window and a way to easily embed a PHP page inside that window that will mimic the work of the application.
I don't think it's possible. Take a look at here.
But
why do you reorder windows by change their positions in the dom in the first place? You could simply work with z-index. A basic example where you just set an active class of the targeted frame.
$(function() {
$('.AppWindow').draggable({
handle:".DragHandle",
drag: function(event, ui){
updateActiveWindow(event.target);
}
});
$('.AppWindow').on('click', function(){
updateActiveWindow(this);
});
function updateActiveWindow(el) {
$('.AppWindow').removeClass('active');
$(el).addClass('active');
}
});
with following css changes
.AppWindow.ui-draggable-dragging,
.AppWindow.active {
z-index: 1;
}
Edit: optimized the js a bit so that the window turns active once you start dragging.
Two questions.
When i'm loading to div file via jQuery .load()
$('.class').click(function(){
$(this).load("file.php");
});
file.php is loading properly, but whenever i click on it (doesn't matter where, just in file.php zone), page is blinking. Something like page refresh on click. Is there a way to prevent that?
Also the position of this page is always relative to div. Why doesn't position: absolute; on body in seperate css file for file.php work for file.php? I want to reset the position of file.php to be on top of website (not z-index). Thanks.
Your code
$('.class').click(function(){
$(this).load("file.php");
});
says any time you click in that div, (re)load the contents.
You may want to use jQuery's one method instead
$('.class').one("click", function(){
$(this).load("file.php");
});
which will only execute the first time you click inside the div.
As to position, we'd need to see code. Possibly one of your parent elements has position: relative?
Easy way.
$('.class').one("click", function(){
$(this).load("file.php");
});
Also is better to use .ajax() for this to have more options and better control.
.load() sometimes can first destroy content and then load new one. If you load bunch amount of data, that can made blink effect.
I now I am not supposed to use links here as it will change but at the moment my problem can be seen at
http://8anime.net78.net/
The red under header thing has social buttons which load strangely. I want to hide them all, and when they are loaded display them.
Basically display 4 certain iframes after the content of the iframes have loaded.
You can use JQuery 'load' function.
First hide the area. Then do the following action.
$('hiddenarea').on('load', function(){
$(this).show();
});
For more details you can visit the following link
https://api.jquery.com/load-event/
First make a div around the social items then hide the div with some css.
display: none
then add some jquery like this
jQuery(document).ready( function(){
jQuery('#thehiddendivhere').fadeIn(1000);
} );
Please have a look. EDIT: here is a link to a fiddle for the entire code: http://jsfiddle.net/e77aqubx/
This is a section of the jQuery (everything above it seems to be working fine). I am trying to get portfolio.html to show up in the #portfolio div (which is not visible until you click the link for it). The portfolio.html is in the same folder in the directory so I don't think I have to worry about the link.
$("#portfolio_link").click(function(){
$(".header").hide();
$("#about").hide();
$("#portfolio").show();
$("#portfolio").load("portfolio.html");
});
I have a div set up for it in the html as
<div id="portfolio">ooh blah dee</div>
In the jQuery I also tried:
$("#portfolio").show(function(){
$("#portfolio").load("portfolio.html");
});
Have you considered using IFrames? If I understand your issue correctly you can simply change the display of the element on action using something like .toggle()
example: JSFiddle
Edit:
As far as the current code, i would really need to see some more info as your code appears, at a simple form anyway, correct. Can you provide your file structure, or the results from the networking tab in dev tools when you run the event? Or even give this a shot on your .load():
$( "#portfolio" ).load( "portfolio.html", function() {
alert( "Load was performed." );
});
However it's important to remember that .load() is an ajax call so everytime you run your display method you're rendering a view via ajax instead of that one time iframe.
Hmm, the problem might be that the #portfolio_link element is created in the DOM after you attempt to attach the event listener. This could be solved by attaching the event listener to the 'body' tag and filtering down to any click events on children matching the '#portfolio_link' DOM selector.
Try this:
$('body').on('click', '#portfolio_link', function(){
$('.header').hide();
$('#about').hide();
$('#portfolio').show();
$('#portfolio').load('portfolio.html');
});
Jquery works in chain.
Also try first to load and then hide.
Can you use Firebug or Chrome devoper tools to see
what is happening with DOM?
I use the tabber script shown on http://www.barelyfitz.com/projects/tabber/ to provide a tabbed page. Generally it works well, and my only complaint is that the tabs don't show until the content has fully loaded, and then there is a jump as the screen writes itself properly. (See www.littlehotels.co.uk/spain/noves.php for an example of what I mean.)
I thought the solution would be to hide the div containing all the tabbed content like this
<div class="tabber" id="tabber" style="display:none">
and then reveal it with a small javascript function which is called by
<body onLoad="ShowTabber()">
The javascript itself is
<script type="text/javascript">
function ShowTabber() {
document.getElementById('tabber').style.display = "block";
}
</script>
My little function appears to stop the external javascript (tabber.js) from working because the page displays the content of all the tabs in line, without the the tabs themselves at the top. This is the same result as if I delete the reference to the external script from the of the page.
What am I doing wrong?
More explanation:
When the tabber.js file is missing, the page displays the content of all the tabs one after the other(as you would expect). Running the script as explained above has exactly the same effect; hence I am concluding that the script blocks the main javascript from running.
'onLoad': function(argsObj) {
/* Display an alert only after tab */
if (argsObj.tabber.id == 'tab') {
alert('Finished loading tab!');
}
}
By default select a tab.Then after completion loading that tab it will show a message.
see here
Well, I solved the problem (sort of) with jQuery, but it has now raised another problem.
In response to PSR, I looked more deeply into jQuery. It would have been too complicated to change over to .tabs(), but I did use jQuery to hide and show some divs at the appropriate moments.
I placed a simple little line in fron of the tabber div to show a "Loading" message.
<div id="loading" align="center" style="position:relative;top:70px"><h6>Loading ...</h6></div>
Then I put this script in the head, under the jQuery line.
<script type="text/javascript">
$(document).ready(function(){
$("#tabber").hide();
$("#loading").hide();
$("#loading").fadeIn(1000);
});
$(window).load(function(){
$("#loading").hide();
$("#tabber").fadeIn(300);
});
function checkResize(id){
var win=document.getElementById(id).contentWindow.document.body.scrollHeight;
alert(win);
}
</script>
That works fine, but a couple of the tabs have iframes for their content, and this script breaks autoResize script I use on those iframes. I'll open a new question to see if anyone has an answer to that.