qTip styles not working for me, on any qtips, made by anyone, on any browser? - qtip2

I'm trying to get qTip working on my own project, and the qTips do show up, but without styling. I've tried googling and poking around Stackoverflow, but to no avail.
For example, if I look at the qTip demo page, here, I can see the styling. But when I click the jsfiddle button on the top left corner, (which takes me here) the styling is gone.
Anyone know what's going on? It makes it impossible to style my own qTips!

That's because the code is a bit different on those two pages
in the original/styled the it use classes: 'qtip-tipsy qtip-shadow'
while on jsfiddle it use classes: 'ui-tooltip-tipsy ui-tooltip-shadow'
change on the jsfiddle to classes: 'qtip-tipsy qtip-shadow' and its all good...

Related

Broken design and and not clearly visible dash in EnhancedDateRangePicker Vaadin 14 component

There are two problems that I have using the EnhancedDateRangePicker in Vaadin 14(source: https://vaadin.com/directory/component/date-range-picker):
The design is broken when I add the component somewhere in a layout but that happens only when I add a label. If I don't the design is as expected to be. Here is a screenshot to see what exactly happens -
The other problem is that the dash is not visible clearly in this color(light gray I think). Is there a way to change the color of the dash?
Could you please tell me is there any way to make the design as I mentioned in the above two points?
Thanks in advance :).
The problem is solved. It's not the problem with the component, it is actually the Theme which we are using in our projects and the component just overrides the theme styles and that brokes the component. When I put it in a blank page there is no problem. Thanks you all very much for the effort :).

Full screen responsive horizontal website

I am trying to find the best method in order to create a horizontal website, full screen and if possible responsive, minimum width to be for tablets. The thing is that I need also the horizontal scrolling with the mousewheel, and I saw that fullPage.js doesn't support that or at least i couldn't manage to make it work on this plugin.
Anyway, I need an idea on building the template, with full screen sections displayed inline - I will be very grateful for any tip. Thanks.
Making horizontally responsive is bit tricky and requires a lot of effort.. There can be many many design approaches for making it responsive. It can't just be described with JSFiddle snippets..
However, I have something for you that will definitely get you started with "Horizontal Responsive Layout designing"..
This is must guide / tutorial for people who want to get started with Horizontal Responsive approach
http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/
you could use one of the tools listed in the following links
http://www.cssdesignawards.com/articles/15-excellent-jquery-plugins-to-spice-up-your-sites/44/
http://jquery-plugins.net/scrollit-js-jquery-plugin-for-scrolling-pages
or you could also mix raw js/jquery with anchor links and add animations when clicked. in taht case you can scroll down using mouse wheel and also have fancy animations when a link is clicked
regarding responsiveness use css media queries

C# ListView Image/Icon margin/padding

Is it possible to reproduce what is on the picture below in ListView, padding/margin icon to the right.
http://img801.imageshack.us/img801/4043/listview.png
My first question here, so I couldnt post the picture here.
Basically I need to move the ListView icon more right, I am reproducing file/directory browser, so the fails that are in a directory need to be below them and slighty right like in the picture, I have everything else figured out.
You should be using a TreeView control:
http://msdn.microsoft.com/en-us/library/1dtsdfkx.aspx
But if you insist on hacking a ListView to render this way, you'll simply have to take over drawing each row yourself. You can do so using the OwnerDraw property, though be warned that there's a lot of corner cases here so you should do a lot of reading to see what people have had to deal with when implementing this:
http://msdn.microsoft.com/en-us/library/system.windows.forms.listview.ownerdraw.aspx

Page width bug when inserting AddThis code

I use AddThis on most pages on my website for sharing on social networks. Pages that have the AddThis code are very very wide, because of the AddThis code, as seen in the horizontal scroll bar (Please see example below). Removing the code fixes everything and the page width is back to normal. I can't seem to put my finger on the why this happens with the AddThis code. Please help!
Please click on link for example:
http://roshtof.co.il/events.php
This is due to right to left language
This is what make the problem in your code:
-10000px!important
After I remove it the scroll is fix.

How can I create scrolling areas like the ones on stackoverflow?

I'm currently working on a flash project, which will use multiple scroll areas.
I'm trying to find out how to create a scroll area like I see on stackoverflow, and make it function similarly.
Whenever someone posts their lines of code to stackoverflow, the scroll area scrollbar looks exactly like the scrollbar in the web browser, and is able to be scrolled with the mousewheel smoothly, without affecting the webpage scrolling.
Example: disable mouse wheel scrolling while cursor over flex app?
Could anyone please explain to me how I can do this in my flash project?
Thanks!!
You wouldn't need flash to do this... This is accomplished using CSS. You would just need to put the portion you wanted to function like that in a div (or any HTML container for that matter) and then define such properties as min-height, max-height, min-width, max-width, overflow, etc. I think there's one that determines the presence of the scroll bars but I don't remember what it is for sure. Very easy to do this and flash would be a bit of overkill.

Resources