I tried using $("body").niceScroll({horizrailenabled:false}); and body{overflow-x: hidden}
but both didn't work. I have horizontal scroll on some resolutions like on 480px, not on all.
You have to pass the param to the plugin:
$("#boxscroll").niceScroll({horizrailenabled:false});
and then remove the native scroll from the element:
<div id="boxscroll" style="overflow-x:hidden;"></div>
It is well documented on the nicescroll repo here: https://github.com/inuyaksa/jquery.nicescroll/issues/114
Related
I'm having problems with my fixed menu. As you can see of the example beneath it's not possible to click the links "Vingårde, Dyrkning..." because of the div box with the fixed menu on top of it. I've tried ordering the layers with z-index but I just can't get it to work. Can anybody help me out?
http://itu.dk/people/mbul/humlum/
And if anyone by the way have a method on auto adjusting the height of the page so it covers the whole viewport I would be very glad to hear from you :-) In the website version above I've set the height manually to 1000px which is not preferable
Thank you!
You need to put all the wrappers' elements outside of it and put them after the left-page container and before the right-page container. Finally, remove the wrapper, it seems unnecessary for the page in order to work.
I fixed it through Chrome's dev tools, but I assume it should work if you modify the html that way.
The body should look like this:
<div id="left_page_container">...</div>
<div class="nav_humlunvim">...</div>
<div class="nav_butik">...</div>
<div class="nav_blog">...</div>
<div class="nav_kontakt">...</div>
<div id="right_page_container">...</div>
Hope it helps; as an extra observation it is more common to use "hyphen-separated-names" for selectors than to use "snake_case_names" :)
I'm trying to use jsPlumb with the YUI framework to make some divs draggable and connected. However, I find when I try to make the divs draggable but contained within their parent, using:
jsPlumb.draggable("window2", {
containment:"parent"
});
the div is still draggable outside the bounds of its parent. If I set the parent's css to "overflow: hidden" I won't see the div when it's dragged beyond the parent's bounds but I'll still see the connector to the div, which looks really awkward.
To see this all in a fiddle: http://jsfiddle.net/xXYwX/3/
Does anyone know if there is a way to use jsPlumb's draggable function with YUI and still restrict the movement of the draggable div?
Thanks!
First make the div draggable using jsPlumb:
jsPlumb.draggable("window2");
Then add necessary jsPlumb end points:
jsPlumb.addEndpoint("window2", { ----});
Then add the HTML draggable like
$('#window2').draggable({
containment: 'parent'
});
Its working for me..
No, it seems not possible with the yui version of jsPlumb. The 'dd-constrain' module is missing and i found no way to plug this module in, because you can't get access to the Y.DD.Drag object.
You can send a feature request to the creator or do a pull request on github.
Here is a plain yui example with a constrained drag:
http://yuilibrary.com/yui/docs/dd/constrained-drag.html
make your container overflow: visible in css
I am using a drop shadow filter inside an SVG file that is embedded using an img tag. On my MacBook, it looks fine in Safari. However, in mobile Safari, the graphic gets really pixelated and loses all it's sharpness. When the filter is not applied, the SVG renders fine. Is there any way to fix that besides to pass on the filter?
This problem is still relevant in 2018, and I've found a solution. You can duplicate the element you give the filter to, place it below the actual element, and keep filter only on it, without any filter on the element. This way, Safari and other browsers will only rasterise the element with the shadow when resizing, however it will be hidden by the sharp-looking vector element. You can see examples and read more here.
Unfortunately I tried all the suggested workarounds for this, none of them worked, the only thing that worked for me was putting the svg inline, not as an img tag.
Surprised this issue appears to have been around for so long!
You should try explicitly setting the "filterRes" attribute of the filter to a value that matches retina displays.
It's 2021 and it's still relevant. I found a workaround that worked for me: You can enlarge the svg and then use a css-transform to scale it back:
.section_logo img {
height: 500%;
transform-origin: top left;
transform: scale(0.2);
}
I have an alternate view for a widget. In that view I'm suppressing the wrapper using code like this:
Model.Metadata.Wrappers.Clear();
This works, but I'd like to only suppress the Widget.Wrapper. Right now it is also suppressing the Widget.ControlWrapper which prevents the edit buttons from displaying when I have the Widget Control Wrapper module enabled.
Is there any way to clear only the Widget.Wrapper while keeping the Widget.ControlWrapper?
In case anyone comes across this for a similar problem, I was able to suppress the Widget.Wrapper thusly in a Widget-Sidebar.cshtml file in my theme:
#using Orchard.DisplayManagement.Descriptors;
#using Orchard.Environment.Extensions;
#{
Model.Metadata.Wrappers.Remove("Widget_Wrapper");
Model.Metadata.Wrappers.Add("Widget_SideBarWrapper");
Model.Metadata.Wrappers.Add("Widget_ControlWrapper");
}
#Display(Model.Content)
I started out by using the Shape Tracing tool to create an alternate for widgets I had in a "sidebar" column (basically a <div id="sidebar"> I have in my layout as #Zone(Model.Sidebar)).
I placed the code above in the Widget-Sidebar.cshtml alternate that I created using Shape Tracing.
Model.Metadata.Wrappers.Clear(); as used by the OP completely removes everything, to the point where in Shape Tracing it won't even show up as a widget. Adding my own alternate (Widget.SideBarWrapper.cshtml, which is added as "Widget_SideBarWrapper" above) would not fix this. I felt that was wrong even though the content displayed.
Model.Metadata.Wrappers.Remove("Widget_Wrapper");
seemed the right way to go (i.e., Shape Tracing still showed a Widget), but it appears to REMOVE all the other wrappers, so you then have to add your new wrapper along with Widget.ControlWrapper.cshtml (written as "Widget_ControlWrapper" in code above).
HTH.
I was able to add back the Widget.ControlWrapper like this:
Model.Metadata.Wrappers.Add("Widget_ControlWrapper");
This seems to be working just like I wanted.
So I load some simple HTML into a webview.
The html is in the format: (it is extracted html, therefore no body tags.
<p>..blah</p>
<div style="text-align:center;">
<a href="http://services.runescape.com/m=rswikiimages/en/2012/5/combat1-18140712.jpg" target="_blank">
<img src="http://services.runescape.com/m=rswikiimages/en/2012/5/combat1_thumb-18140804.jpg"></a></div>
<p>..blah</p>
In the webview activity class I add:
webInfo = "<body style=\"color:white;font-size:15px\">" + webInfo + "</body>";
//for setting the size and color of the text
I use the following to load the html:
webview.loadDataWithBaseURL(null,webInfo,"text/html","UTF-8",null);
// webInfo is an html string
and I do the following so that it doesn't scroll horizontally and so that the image fits within the screen.
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);|
If I don't use SINGLE_COLUMN, I'm always scrolling horizontally, even though the text fits nicely within the page. I thought it had finally solved the problem but I get overlapping html when i load it. This fixes itself if I zoom slightly in or out with my fingers.
Here's a picture of whats happening:
Question 1:
How do I fix that problem and display the image so it fits in the screen and no horizontal scrolling is required?
Question 2:
I've also been having trouble getting rid of the weird symbols too, my 's show up really weird.Tried using several different encodings like UTF-8, US-ACSII and lots of Windows ones, none of them seem to work to get rid of the symbols.
I hope I've been clear, any help is appreciated, I've been fiddling with this for a while O_O...
Add in webview settings:
webSettings.setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING) //handle for font overlapping.