How can I insert a new div (not in .js) into fancybox (when fancybox - image is open)? Like this:
I'm also try to make a div css to fit that description :)) still with no avail. I suck at css styling, will get back on this one when i figured it out. my theory is that it should be a div within a div within the div if you get what i mean :))
!!!!!!!!
UPDATE I tried messing around the css and this is what i got (I'm using 1.3.4v for simplicity's sake in my part) and for reference, these images and codes I used are found in the 1.3.4 demo packege from fancybox.net
If I didn't explain my code well, it just means I'm still working on it so I just hope you get why it is vague, but the point is it's doable and you only need to work out the css file. I hope someone has a nicer looking code
Output:
1.I all of these from jquery.fancybox-1.3.4.css
just change these 1 2 3 and mess around with example7 there in the demo
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
padding-right:50%; /*this part extends the right side of the photo so it would look like thet're on the same page*/
}
2.This re-positions the original title to the upper right part of the image
.fancybox-title-inside {
padding-bottom: 10px;
text-align: left;
color: #333;
position: absolute;
top:0;
left:65%;
border:1px solid black;/*for you to see how large the div is*/
height:100%;
}
3.My new RED div where I will be
div.fancycontent{ /*saviour do word wrap here*/
border:1px solid black;
padding:2px;
color: #333;
background: #FF0000;
width:50%;
height: 100px;
}
I tried using fancybox in one of my projects but had to revert back to implementing my own popup's using the DIV elements. Its pretty easy to create your own popups instead of using fancybox or facebox if you know a bit of JQuery try to have a look at these links. You can customize your div tags to contain what ever you need.
output
source
In your fancybox JS, set the type to iframe:
$(document).ready(function() {
$('.callout').fancybox({
type: 'iframe',
width: '640px',
height: '480px',
});
});
Then you can open up anything you want in the fancybox by simply applying the class to your link:
<a class="callout" href="{path}">{link}</a>
If you have issues with the iframe display, you might try adding a secondary class to tell fancybox what type of content you are linking to (this is a new convention introduced in the latest version, so I don't know if I'd recommend using it by default):
<a class="callout callout.iframe" href="{path}">{link}</a>
Hope that helps!
ty
It just happened that I created this fancybox "a la" facebook demo that looks pretty much like what you want:
http://picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html
Related
What I would like to achieve is this:
Surely, I went through the button documentation, but it seems nothing similar is there. So, I would appreciate some pointing in the right direction (codepen with a basic example would be most awesome).
So, ideally, this would be one button tag where I would be able to pass two variables (one which would appear on the left and one on the right). This does smell like a job for a Angular directive, though I haven't fiddled with it too much just yet so a friendly nudge in the right direction would be appreciated.
There is something similar to this in their documentation
http://ionicframework.com/docs/components/#button-bar
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
</div>
What I ended up doing in the end was this: I created a div with a class button and then inside it I created additional two div's with custom classes.
The code below:
.leftButtonSide {
width: 50%;
float: left;
color: #000;
}
.rightButtonSide {
width: 50%;
float: left;
background: #F2F2F2;
color: #000;
border-radius: 2px;
}
<div ng-repeat="d in data" class="button button-positive-outline">
<div class="leftButtonSide">2</div>
<div class="rightButtonSide">2,00</div>
</div>
True, for the exact same look you would have to play a bit with CSS. I ended up with this in the end:
Hope this helps someone too!
I 've tried to give css to scrollpanel in GWT. But its not working.
The problem is I want to change the foregroung and background colors and also the width of scrollers.
Is it possible? can any1 suggest?
Generally it is based on the browser user agent.
For example : For Chrome You need to do something like,
::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button { background-color: #666; }
::-webkit-scrollbar-track { background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}
Please refer this Link
GWT scrollbars are simply html ones, so you can style them in the same way you would do with plain html: using css.
Add a class to your ScrollPanel and set the styles in your .css files, or set styles to it using java methods.
But you have to be aware that styling scroll-bars is not a standard thing, webkit supports it via vendor-css-properties and the same with IE, but unfortunately you will not be able to style FF.
UPDATE:
As #Andrea suggest in the comment below, if you can change in your app ScrollPanel by CustomScrollPanel you have much more options to customize bars.
In this case you have to provide your own bars because by default it uses browser native ones. This response can help you.
So, facebooks somehow adds a 1px border to your appplication when using an iFrame.
Is there any way to get remove this?
I checked the source code, and it has frameborder="0"
My .php also contains:
html, body, iframe, div {
border: 0px;
margin: 0px;
padding: 0px;
}
what to do?
(or do I just have to live with only having 748 px?)
I found out it was because I was using some old setting for embedding my app. This setting is no longer available, so this is of no use anymore!
anyway, the facebook frame code has a bug, it should use frameBorder="0" instead of frameborder (note the capital B, needed for it to work in ie7 and below)
In my web app, I want to have a table where every other row is colored with a different background. I am using GWT and so in my UiBinder file I have some style information like this:
<ui:style>
.productlist {
cursor: pointer;
width: 50em;
padding: 10px 10px 0px 10px;
}
.productlist tr:nth-child(even) {
background-color: silver;
}
</ui:style>
I believe this is the correct CSS as it works in the browser. However, when running the app in dev mode, I get a crash saying the CSS cannot be interpreted. If I replace "even" with "5", I get an error saying the Uibinder expected <IDENT>.
Has anyone used the nth-child CSS selector with GWT before?
This is a known issue.
You can work around this problem by escaping the parenthesis to avoid confusing the poor GWT CSS parser:
.productlist tr:nth-child\(even\) {
background-color: silver;
}
http://api.jquery.com/animate/
On this page, they give a demo where they have a gray div move across the screen with the click of a button.
Notice that if you click the right button enough times and the DIV block reaches the end of the container it creates horizontal and vertical scrollbars.
I downloaded and modified the code to get rid of the overflow property and what I have so far works BEAUTIFULLY in desktop browsers.
However, Safari on the iPhone handles things a little bit differently. For some reason, Safari completely ignores the overflow property and instead expands the browser window to show you where the block moved to.
I don't want you to be able to see the block. I want it hidden until you hit button again.
Anyone know what the heck is going on?
Here is a pic of the issue:
Here is my code:
div {
position:absolute;
background-color:#abc;
width:100%;
height:100%;
margin:0px;
max-width:100%;
}
body {
margin:0px;
padding:0px;
}
* {
overflow:hidden;
clip:rect(auto, auto, auto, auto);
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=110%"}, "medium");
});
$("#left").click(function(){
$(".block").animate({"left": "-=110%"}, "medium");
});
</script>
Even though I have moved the DIV block off the screen and I have overflow:hidden as a global style, the iPhone will make room for it in the browser window to show you where the DIV has moved to. ANNOYING!
Thank you in advance!
Not completely sure I understand what you want to accomplish here. But if you want to make the gray box disappear as it leaves towards the end of the document, then I would suggest that you wrap the div inside another div, and set the width of the wrapping element to 100% and overflow: hidden;
Like this:
<div class="wrapper">
<div class="block"></div>
</div>
Also add the appropriate styling:
<style type="text/css">
...
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
</style>
Note that you need to absolute position the wrapper as well, otherwise the gray block will still be visible outside it. You'll also need to give it some height (I used 100% in my example) or it will be 0px high (due to the absolute positioned child) and nothing will be visible.
Hope that helps.
Alternative to
overflow:hidden
HTML:/<div class="clear"></div>
CSS:.clear {clear:both;}