I've had a good search around StackOverflow and have not specifically come across this problem or found a fix to it.
What I want to do is be able to remove the following from the ui-datepicker-div of the jQuery UI Date Picker > https://jqueryui.com/datepicker/
On the div it sets the following inline style
style="position: absolute; top: 557px; left: 20px; z-index: 6; display: block;"
I've had a good look around myself and cannot find away to get rid of this totally. If anyone knows how or has any ideas it would be great to know.
Thanks,
Glen
Related
I was learning the new UI toolkit. I'm trying to add an image to a visual element.
I added an image and saved it. After reopening it, nothing appeared like I didn't add anything.
What can it be about?
SS of it
same here, I could overcome the problem by adding the bg image via an txt editor program.
such as
style="width: 60px; height: 60px; padding-right: 10px; background-image: url('project://database/Assets/Images/xxx.png');"
I have no idea why they didn't fix such an obvious issue yet.
I have started with tinyMCE 3. I was trying to copy paste below code into HTML Source Editor like
<video id="testplayer" data-account="4338955589001"
data-player="Bkh63tBcx" data-embed="default"
class="video-js" controls=""
data-video-id="5347595845001"
style="width: 100%; height: 100%;
position: absolute; top: 0px; bottom: 0px; right: 0px;
left: 0px;"></video>
But When I click on updated it appears on Editor but again if I click on HTML Source editor it clear above code . please let me know what am I missing?
go through : http://archive.tinymce.com/tryit/3_x/full.php and copy pasted above code but after re -open HTML Source Editor it clear .
This was my answer before details. See below to see the actual help for this question:
---- BEFORE-------
Please have a look in the documentation.
You have to add the media plugin to the TinyMCE settings so it doesn't rip of the <video> tag.
That plugin also adds a menu option in Insert > Media, which you also can use to add your video.-
------EDIT--------
Using your TinyMCE fiddle, and also the full featured TinyMCE 3, I was able to put your video there. It seems that TinyMCE 3 has some issues with this, to which TinyMCE 4 works fine.
To add your video, instead of using the HTML source feature, use the Media feature. If you click on the video icon on the menu, a popup will appear with options for you to add a video. One of those options is for you to insert directly your source code. If you do it this way, the video won't get ripped off when you view the HTML source. I'm not sure what TinyMCE is doing differently, but adding it through the HTML source it gets cleaned up, while using the Media Source it won't.
------EDIT 2--------
Further investigation, regarding why clicking on "HTML source" twice after adding the video through the "Source" tab of the Media button, I went to check the difference between the HTML on the object that appeared in the rich text editor.
The first time (right after adding the tag), the HTML of the object that appeared in the rich text editor had the following attribute:
data-mce-json="{'video':{'attrs':{'id':'testplayer','data-account':'4338955589001','data-player':'Bkh63tBcx','data-embed':'default','class':'video-js','data-video-id':'5347595845001','style':'width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;','preload':'none','controls':'controls','src':null,'poster':null},'sources':[{'src':''}]},'params':{'src':null},'type':'video','class':'mceItemMedia mceItemVideo','id':'testplayer','width':'320','height':'240'}"
Opening the the HTML source and clicking in "Update", and checking again the HTML source of the object, the same attribute was:
data-mce-json="{'video':{'attrs':{'id':'testplayer','width':'320','height':'240','style':'width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;','data-account':'4338955589001','data-player':'Bkh63tBcx','data-embed':'default','class':'video-js','data-video-id':'5347595845001','preload':'none','controls':'controls','src':''},'sources':[]},'params':{},'hspace':null,'vspace':null,'align':null,'bgcolor':null}"
As you can see, there are several differences between them. The main difference that is causing the <video> tag to be ripped off after the second time is the fact that the 'sources' is [] instead of [{'src':''}] like it is on the first. If you change this manually in the HTML source of your browser, you'll see that it works.
Now, to fix this, I'm seeing two possible solutions:
Enter a src attribute, other than src="". When it has a non-empty src, it seems to work. However, I don't know if this will break you <video> tag, it depends on what your goal is. So, this might or might not be feasible for you, but it's worth the mention.
Use the protect setting on TinyMCE. With this, you can specify, through a regular expression, what should be protected from TinyMCE cleanup functions. This will make the video invisible in the Editing mode of TinyMCE, but will keep it in the HTML source. For your case, this setting would be like this:
protect: [
/\<\/?video[^>]*\>/g
]
You just need to measure both possible solutions and see if any of them is good for your case.
I am trying to make my design mobile friendly. What I have is that everything fits nicely when I look at the design on http://ipadpeek.com/ (Great Tool!) although when I actually view it through my iPhone 4 the content only takes up around 80% of the page, whereas the remaining 20% is a white background.
There is only one element which appears to fit the whole width and this has the following style:
<div class="text-elements">
<h2>Your website can achieve...</h2>
</div>
.text-elements {
float: none;
margin: 0;
padding: 75px 10px;
h2 {
font-size: 4em;
width: 100%;
}
}
Any ideas why this is happening?
FYI most of the online iPad style tools such as http://ipadpeek.com/ don't tend to pick up any of these overflow issues anyways.
In the end I found that the issue was at least one or more divs which had explicit widths set, but which were quite hard to find as culprits!
Tips for anyone else with this problem:
If you know any design will be responsive, use max-width: Xpx, width: 100%, in your main stylesheets on any explicit width divs to avoid them becoming a culprit in later course.
When using width: 100% on items, make sure you add any additional padding to the inner div (especially if it is in pixels), or account for it such as width: 95%, padding: 2.5%.
Try overflow: hidden on some of the main wrappers which hold your content to see where issues are coming from.
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
I'm working on a web app and I need to get a div to stick to the bottom of the viewport. Always viewable and always on the bottom of the viewport. There's an example of what I want here: footer. Unfortunately, this doesn't work on the iPhone. I can think of some ways to do this using javascript but I would rather not. Any ideas on how to get this effect on the iPhone using only css?
This situation has changed with iOS 5. Now you can use overflow:scroll or position:fixed and it will do what is expected. For example, this type of code:
<header style="
position: fixed; top: 0; left: 0;
width: 100%; height: 20px; font-size: 20px">
Heading
</header>
<article style="margin: 20px 0">
Your page here
</article>
<footer style="
position: fixed; bottom: 0; left: 0;
width: 100%; height: 20px; font-size: 20px">
Footer
</footer>
...should work without problems.
Though there are still many devices running older iOS versions, so you might want to lazy-load Scrollability on older devices, which you can test with this javascript:
var isios = navigator.appVersion.match(/CPU( iPhone)? OS ([0-9]+)_([0-9]+)(_([0-9]+))? like/i);
// if that succeeds, it usually returns ["CPU OS X_Y_Z like",undefined,X,Y,Z]
if (isios && isios[2] < 5){
// load scrollability here. jquery example:
$.getScript("/js/scrollability.min.js", function() {
// code to run when scrollability's loaded
}
}
You can't. At least not the way you think.
You have to fake the entire thing is javascript. Use something like iScroll
It sort of sucks but Mobile Safari does not support any kind of fixed positioning at all. So you have to make the page size equal to the screen size and then use javascript to handle touches and set scroll offsets and animate scrollbars and what not manually.
This script I linked does a lot of that for you, but it's not as robust as a native solution would be.
Here is an example on how to combine CSS3, HTML, and JavaScript to create a navbar for the iPhone.
http://www.mindovercode.com/2010/09/12/iphone-navbar-using-xui/
ps: It does work in landscape mode.
Here is a working example, with code. It is not for the faint of heart:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
There is a new JavaScript for this that works much easier: http://joehewitt.github.com/scrollability/
Therefore in iOS 5 there will be fixed position and overflow scroll available!