Resize shadowbox after it loads html - javascript

im new to javascript and jQuery in general,
I have a html openened in Shadowbox with something like
Argentina
Inside that html i have a link to another html that i want to display in the same shadowbox, but it's size is bigger.
How could i resize the shadowbox so that the second html it's not cutted off?
I've read something about
function openSB(path,width,height){
but i dont know how to make it work
Thanks

http://www.victorstanciu.ro/dynamically-resizing-the-shadowbox-js-modal-window/
"The reason you might want to manually resize the modal window is in case the content inside changes, for example in the case of IFrames. Fortunately, implementing such a method is quite easy."
You don't say what version you're using, but a comment on that page offers a solution for version 3 also: http://codestory.a-chantioux.fr/dynamic-resize-with-shadowbox-js/

Related

is there anyway to open href links in message box?

i want to open html href link files in message box or any display box.( sorry i dont know, exact word for box.)
is there any way to open href links in any kind of display boxes.? i need answer only in JavaScript technology. Help me
I don't think an alert() or confirm() or any other built-in browser dialog box can display more than just simple text. But you can have any HTML content you want in a modal div dialog. The jQuery UI Dialog is a popular example. You don't need to use that plugin, though it would make it easy.
Essentially you just render a hidden element to the page (commonly a div) and respond to some page event by styling the element to "float" over the rest of the page. That element, since it's part of the DOM like anything else, can contain any HTML you'd like.
Take a look at jQuery's fancybox -> Fancy Box
well depending on how you building your web app. You could integrate twitter bootstrap, it has tons of great JavaScript plugins. a modal might solve your problem.
http://getbootstrap.com/2.3.2/javascript.html#modals
Alternative you can uses a lightbox, I see someone has already mentioned fancybox. The second version is now out.
its supports images, iframe, and divs as conetent
http://fancyapps.com/

HTML, CSS and javascript editor with tabs?

Here's what I have for now :
http://jsfiddle.net/W29Wk/
(I'm using Dreamweaver with the Spry Tabbed panels)
I'd like to make something similar to JSFiddle, when you share the script...
What I need is to be able to write my HTML code in the first tab, CSS in the second and Javascript in the third one. Once I'm done, I go in the "RESULT" tab and it renders my code into HTML.
The RESULT tab does not need to be a TextArea, it can be a DIV or a iFrame, as long as it is the same size of the other TextArea.
Thanks a lot!
The result needs to be an iFrame. Jeffrey Way explained it very good in this screencast on nettuts+: How to Inject Custom HTML and CSS into an iframe
You can make the tabs tabs yourself (or just google it).
But why are you making a second tinkerbin?

Creating a Simple Layout/Style Editor

I am trying to create a layout/style editor similar to what is available on blogger. I noticed that they use an iframe, but the iframe has to refresh everytime you make a change. I am looking to do something more responsive. For example, if i change the width of a div I would like to see this change happening while I move the slider.
I was wondering if something like this is possible with the iframe setup using jquery/etc to modify the source of what is in the iframe, or is it better to not use an iframe?
The iframe would be used to load an existing webpage that is online.
The good thing with an iframe is that is not interfeering the rest of the page (you can use diffrent CSS, scripts, variable names and so on). TinyMCE and other editors uses iframe for its content. And yes its possible to access the iframe directly from jQuery:
See this link, http://jsbin.com/ajatix/edit#javascript,html,live

Editing Facebook Like-Box Css on The FLy?

I am not a coder but, i am able to get my way around code most of the time. However, i found that this is the best place to ask questions relating to code stuff.
I have been working on a website for a client and i am at 95% - the only problem i have is facebook like-box. i have found several tutorials on the web to modify the like box css, and i have implemented most of the recommendations but, i have no favorable results.
Please - stackoverflow help!
I know jquery/javascript is a very powerful language. And facebook like uses javascript iframe/xfbml.
what code would you use, if you were to modify the like box css elements before loading them .
I say load cos i am loading my like box via ".load" ajax. So, when a user clicks the facebook button jquery loads it.
In short: how would i edit a css file on the fly, and then load the edited version afterwards.
thanks
The key problem that you'll have here is that FB's Like button is loaded inside an iframe - a self-contained HTML document within your page (if you use firebug or webkit inspector to inspect the like button, you'll see it's within <body>, <html>, then <iframe>).
The thing about these self-contained pages is that you can't access or manipulate them from the surrounding document (your page). You can change the 'src' attribute (telling the iframe to load a new page), but you can't apply or change styles on the elements inside the page. This is a security limitation that browsers have.
I know that it is possible to have a custom-styled like button, but I don't think it's done with the iframe method.

Fancybox won't load inline 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'});

Categories