The new facebook page plugin has the minimum width at 280px (inserted by a data-width:280px).
However when I inspect the element created by the script with firebug i see an element with id="u_0_0" with the width at 280 but i can modify it from console to be as i need (227px).
I've tried to modify it with a little script made with jquery (i can only work with jquery 1.2...an old version of it...) but it doesent seams to work since the element is inserted dinamicaly into the DOM.
I also tried an method finded by google but also it doesn't work:
jQuery(document).ready(function(){
jQuery('#u_0_0').live('DOMNodeInserted', function(){
alert(jQuery('#u_0_0').html());
});
});
The above method doesn't work and if i dont use live it alerts me with undefined...
So, how can i get the element so i can modify it's css ? Maybe jquery 1.2.1 is too old but maybe i can get and modify it with clasic javascript...
The plugin renders in an iframe which is a separate DOM from yours.
Because of that reason, its not possible to run scripts on the plugin from your website
In your script:
jQuery('#u_0_0') is not able to find the div, since that doesn't exist on your DOM.
I think you can't use javascript or css on an object inside a iframe.
If you look upside on code you will see the iframe.
You can do that only if the location of the iframe target is cross-domain but i'm not sure.
Related
I'm having a weird bug where load() is breaking my carousel.
I have a Slick Slider with 3 slides. You can click the NEXT button to move to the next slide. You can also click the slide itself and it loads content into the div of a cat and some text using:
$('.frame').load(url);
The bug is that after you view the loaded content and click BACK, the NEXT button no longer works. Somehow it breaks the nav. I've tried show() and hide() but that doesn't help.
Please see my codepen demo
And this is the url I'm loading into that demo if you find that useful.
Thanks for taking the time to help me :)
As I stated in a comment to your question, the reason your Slick Slider plugin stops working after you load the other document is because the other document is re-including the jQuery library into your top-level browsing context.
jQuery plugins make themselves accessible by defining a new method and then attaching it to the jQuery.prototype (aliased as jQuery.fn) object.
When you include the jQuery library into your document via a script tag, you can call console.log(jQuery.fn); and you will see an object with all of the convenient methods that make up the jQuery library.
After you have similarly included the Slick Slider library, you can again call console.log(jQuery.fn); and you can find that it has a method property named slick.
The problem is that when you load the document that resides at url that document is inserting a fresh script tag into your parent document whose src is jQuery. This causes a fresh loading of the jQuery library which obliterates your initial instance. If you call console.log(jQuery.fn.slick); at this point, you will find that it is undefined.
I have never before seen an entire HTML document (as opposed to a snippet of HTML) loaded into a div of another document. This is inserting elements into the body of your top-level document that should not be there, like <head> and <body>. I am actually surprised that this is causing so few issues for you.
The way documents are normally nested within other documents is by the use of an iframe. The document within the iframe will be its own sandbox, and its styles and scripts will not be in conflict with those in the parent frame.
You could implement an iframe into your project by replacing $('.frame').load(url); with something like the following:
var $iframe = $('<iframe />', {
src: url,
style: 'height:100%; width:100%;'
});
$('.frame').html($iframe);
for some reason when using mediaelement.js, it creates a div for the progress bar called "mejs-time-rail", but then proceeds to set the html width value to "0" through an inline style.
Since this div is created when the script runs, I cannot edit this property in the source code, but if I edit it (the inline style) in Firefox's inspector, I get the desired result. Also, it seems that this html property created by mediaelement.js overrides any css rules I set.
Any ideas how to circumvent this issue? Maybe editing the actual js script?
Thanks
I can't post a picture because I don't have enough reputation, but I can update this post with a screenshot when I do have enough and/or if it helps
First, it seems the issue is that as the DOM loads, the external script is setting that desired value to 0 like you said. Try adding a custom JavaScript/jQuery file that simply runs after the DOM is completed and
.find the element you want to edit. Then try
.attr('desiredAttr', 'new val');
this should find, and then reset the attribute to whatever you like. Even if the external script changed it on load.
I'm very new to javascript, so this is confusing me. All of the settings charm tutorials only show how to put the controls into the settings charm, but none of them say how to find the information gotten in them.
I tried to do one of these (like I do in the main program):
var muteToggle = document.GetElementById("Mute");
where "Mute" is the id in the separate html file.
muteToggle just ends up being null all of the time. I tried putting it after
WinJS.UI.ProcessAll().then(function completed() {...
but that didn't work either. Everything else is the same as in this page: http://msdn.microsoft.com/en-us/library/windows/apps/hh780611.aspx
Make sure you're doing it in the ready function of the js file that is referenced from your settings HTML. Try opening the JavaScript console or QuickWatch while broken at that line and also look at the DOM Explorer to see if you can find your toggle control. You should be able to access it though. Also, try element.getElementById instead of document.getElementById. Either should work actually, but as long as you're troubleshooting. Good luck.
Your problem is that you are trying to get a reference to the HTML element from the code running during the app activation. Although that piece of code may define the HTML to be loaded for a settings pane, it does Not actually load the HTML into the DOM. You just simply can't get the instance from that location.
What you need to do is have the settings flyout have its own js file that implements IPageControlMembers. In particular, you need to implement the ready method. This method is called once all the HTML and controls are loaded for the page, including your toggle. The link has an example of how to do this.
Also see:
WinJS.UI.Pages.define
Using single page navigation
Im using DOM window ( http://swip.codylindley.com/DOMWindowDemo.html ) to create alerts. However the content that goes in the windows is under the id inline content.
However the js file doesnt do anything with this id and the content inside isn't showing up.
Is there a css file im missing because the window appears but with nothing in it?
p.s. I'm using example one
Unless you absolutely need to use this DOM Window plugin, I'd recommend just using simple javascript or jquery commands to achieve this rather simple task.
But anyways, since you're using example one, you need to make sure that the href on the a tag that you use for your Open DOMWindow function is pointing to the div that houses the content.
To make things easy, here's the site - http://schnell.dreamhosters.com/folio/pixelread.php View the source code all you like.
The middle button of the top bar in your browser window that says "Palette" is supposed to open up a fancybox in the middle of the screen, and that box should load into it the data inside the element with id of 'data', but it doesn't and comes up with an error message of "The requested content cannot be loaded. Please try again later." I took this example straight from the fancybox website and double-checked that all the CSS, image and JS files are in their proper place and loaded. So now I'm lost and no idea how to do/fix this.
PS - I use Google Chrome 6.0. I'll see if this happens in IE8 or Firefox.
PPS - Found a solution. I can force the HTML content that goes into a fancybox by using the 'content' property. Using that and jQuery I can easily stuff a box with whatever I want. Thanks for the help guys.
Found a solution. I can force the HTML content that goes into a fancybox by using the 'content' property. Using that and jQuery I can easily stuff a box with whatever I want. Thanks for the help guys.
I think the problem is that fancybox isn't recognizing your content as being inline (not exactly sure why, but maybe something to do with the query string in the url, since it works when that isn't present).
I would try adding the explicit type: inline to your fancybox declaration:
$("a#inline").fancybox({'type':'inline'});