I am designing an html web page that mimics inline panes by defining this css class:
.paneSection{
display: block;
border-width: 1px;
border-style: solid;
margin: 2px;
padding:0px;
height:200px;
width:200px;
overflow: auto
}
and applying to a span tag. The resulting code is something like this:
<table>
<tr valign=top>
<td>
<span class="paneSection">
... A long piece of text here that will inevitably overflow the block ...
</span>
</td>
<td>
<span class="paneSection">
... More text, may or may not overflow, etc...
</span>
</td>
</tr>
</table>
The problem is that the scrollbars that appear are ugly, gray, boxy ones. I really need a "prettier" scrollbar. I have looked around for a couple hours, and it seems that almost everything points to using the JQuery plugin JScrollPane. However, although I am a developer (I am actually using Java to generate the html for the web page), I have never used JQuery or plugins before.
I played around a little bit with source code from other pages, and got something minimal working, but still nothing pretty. I may be wrong in saying this, but it appears that I need actual image files to make the scrollbars prettier.
An example of one scrollbar that I like is the one on pane2 on this page:
http://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html
Where can I get the images that are referenced in the source? Do I actually need to make those images, or are they available somewhere for download?
Any other help on designing pretty scrollbars (I am NOT a graphic designer, please keep that in mind), or how to use JQuery plugins in general is appreciated.
Added Note I also need the scrollbars to work horizontally, not just vertically. Is JScrollPane still right for this?
No you should be able to grab the images. For example one of the arrows is here: http://www.kelvinluck.com/assets/jquery/jScrollPane/images/osx_arrow_up.png.
The easiest way to find this is use your browser's inspector (Chrome and Safari has this built in, Firefox use Firebug, no comment on IE). Just rightclick on the scrollbar or the part of the scrollbar that you are interested in for the image and do "Inspect Element." From there you can see the css for that element and in this case they are using the background-image property and you can just grab the URL from here.
If you are not a graphic designer I would just find already existing images on the web (assuming the creator allows this). For jQuery in general I would suggest perusing the documentation http://api.jquery.com/ to see what is available to you (I assume you know Javascript) and just start using it. Experience is a great teacher in this case.
Related
This is my first website that I'm trying to build purely by code (usually use Webflow) and I can't get the navbar to work properly. I think it's a javascript problem and I really have no clue with that.
It was working for a while, and I then checked it after a lot of additions and it wasn't working.
Could anyone look over the code and see why the navbar won't open and also is visible on the right side when it is closed.
https://cyan-aeriel-49.tiiny.site
I don't want to mess about with the JS as I followed a tutorial and really don't know what I'm doing. I tried changing the right position on the .nav-items and it came up with an error.
It seems that your problem is with your media queries, for some widths of the screen, the navbar opens perfectly and for others it doesn't.
Here is a tutorial for that: https://www.w3schools.com/css/css3_mediaqueries.asp
Also I noticed lots of inline styles have been added to your elements. Try using a separate .css file with classes inside that will help organizing your css styles.
So if you use a browser JS debugger it seems that all animation for the menu (regardless of media used: desktop, tablet, etc.) is contingent on div.burger, which is only visible when the screen size is below a certain threshold
Since .burger is display: none on desktop view, none of the event listeners get attached to clickable elements, and you get nothing happening on the frontend.
I highly recommend using a browser debugger, such as FireBug to identify problems with your js
I recently took an interest in building websites and am still very inexperienced, so my apologies if this is easily answered.
I was asked by a friend to build her a simple portfolio website for fashion designs. As such, the website mainly has image galleries. The images come in various sizes and rather than ordering them manually to make it look better, I found the Masonry plugin. I implemented masonry.pkgd.min.js into my code (initialized through the HTML) and ran into two issues:
The main issue that might make question 2 moot entirely… It looks fine in IE and Firefox, but the images come up overlapping in Chrome and it looks horrible. I cleared my cache several times and tried implementing the imagesLoaded plug-in, which did absolutely nothing. I am very new to Javascript and as such have to rely on copy/pasting this sort of plug-in whereas someone else might be able to delve in and tweak it, but at the same time I had no issues getting tabbed content and this does work in two browsers. Any idea why it doesn’t work in Chrome and what I can do to fix it?
After the plug-in, I don’t seem to have any control over automatically centering the image columns in the gallery/container and they are aligned left by nature. I more or less fixed this by manually setting a margin-left that puts everything in the right place, but would like to know if there is a better solution.
Please let me know if I need to include screenshots or specific code.
Issue One:
Try adding imagesLoaded. Chrome in particular has an issue if you don't use it with masonry. I suggest trying the solution in the third box first, it's the easiest and fastest loading. This code will go in your .js file if you have one, or in your script tags if you don't.
If the "why" interests you, it's because your containers load before your pictures and don't know how tall they should be.
Issue Two:
You're right on with this one. You can't center the whole masonry container itself (you can get close, but at certain browser widths there will be a small gutter on the right), but you can center the images within their containers by adding a margin like you did or using:
position: relative;
margin-right: auto;
margin-left: auto;
I'm not pretty good in java. Still I guess that question is not too easy for pros as well.
As the header says I'm trying to find a solution how to change a background image gradually by scroll with jQuery.
The background should be responsive.
I found a website having a similar thing sojournnetwork.com
Since I'm no pro with java and jquery a jsfiddle example would be nice!
Thanks in advance
I think this is a perfect tutorial for your needs.
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
This is the result of the tutorial:
http://ianlunn.co.uk/plugins/jquery-parallax/
The background image dont change, just is Fixed.
div.background {
background-image:url(xxx);
background-attachment: fixed;
}
And every "new" image is a container div who scroll like another.
Something like this must work.
I believe this effect is typically called "Parallax". You might find some of the following examples helpful:
http://wagerfield.github.io/parallax/
http://stolksdorf.github.io/Parallaxjs/
You can also search google for the word "Parallax" and find some simple scripts that don't require an external library if that is a requirement. I did find this JSFiddle which might be helpful as well. I believe it uses the following to setup the backgrounds:
background: url(http://www.webdesignermagazine.nl/files/2012/06/golf.jpg) 50% 0 no-repeat fixed;
I have two problems... I've tried altering my CSS file, the JavaScript files and all kinds of other things. A google search yielded no remedy to these problems, so I come to the awesome site of answers!
This page -> http://students.cmps.subr.edu/aaron.chauvin/misc/test2.html
has some issues in Chrome and Safari. Only when my CSS is in effect, the pictures that are supposed to be side-by-side aren't, but when the CSS is off, they are. This problem isn't evident in FF/IE9. I'm thinking it has something to do with the but I'm not totally sure. Edit Edit: Thanks for the fix Genzer!
Also on that page, even if all my CSS/JavaScript isn't linked, I have a small gap between the bottom of the images that are links and the dotted link border... I want to get rid of the gap. What's causing this gap? This happens in all browsers.
Thanks in advance.
Edit: Here's the CSS: http://students.cmps.subr.edu/aaron.chauvin/misc/style.css
Edit Edit: Fixed the side-by-side image link problem, now trying to figure out what's causing the variation in the display of the custom a:focus border (non-existent in IE9, partially encases image link in Webkit browsers) and the gap between it and the bottom of the image link (all browsers BUT IE9).
The problem is you're wrapping all your column's info in a span: <span class="reg">...</span>
IE9 and FF figure out that you want it to display as a block element, but Webkit (Chrome and Safari) don't. Set display:block on the "reg" class and you should be set. (I think this fixes the "dotted border" issue as well, but i'm not quite sure what you meant there)
To get the orange border to show up in IE9, make sure to set outline-style to something like "solid" or "double" in the a.piclink:hover css class, in style.css. Once i did that, the border shows up.
I'm still not entirely sure why your links and nested images are behaving like they are, but I found a little tweak (tweak = almost a hack) to get it to work: Set display:inline-block; on a.piclink and set a fixed height on it. Note that inline-block tacks on 4px, so the height should be 4px taller than the height of the image; in your case: 47px. It's a bit of a hack, but it's valid and it works. Unfortunately IE7 doesn't like this, but zoom:1; *display:inline; get it working.
Adding following CSS code in your style will make Chrome display your TestPage the same as IE8.
span.reg a {
display: inline;
}
I'm developing a product to be used by a number of customers alongside our Web application.
Quick background:
These customers have incorporated into their pages a widget that we've developed.
The widget's content can be modified by using our application.
The idea behind this product is a bookmarklet that we supply, which will "highlight" our widget on their page, turning it into a clickable link that leads to an administration panel in our app.
The "highlight" effect actually involves some z-index tricks; we create a semi-transparent "backdrop" <div> just a few ticks below the maximum-supported z-index to gray out the page; then, we adjust the z-index of our widget to sit on top of that translucent backdrop. The visual effect should look about like this:
http://skitch.com/troywarr/dtexp/example-good
However, in Safari, as well as Firefox under certain conditions, there seem to be some sort of rendering artifacts that prevent this from looking as intended:
http://skitch.com/troywarr/dteqx/example-bad
As you can tell from the screenshot, a couple of elements (our logo image and the <iframe> that holds an advertisement) are still "bright," as intended. But, the rest of the widget is still shaded-out.
I've been poking around with Firebug for quite a while to try to get at the source of the problem, but I haven't had any revelations. I'm hoping that someone has experienced a similar issue, or recognizes the "visual signature" of this kind of problem. Or, if you're simply adept at JavaScript/jQuery and/or Firebug, I could really use your help trying to figure out where this approach is falling short.
I created a test bookmarklet as a live example. To see it, please:
Open Firefox (the version under development currently only works there reliably).
Go to this page and drag the link there to your Bookmarks Bar: Example Bookmarklet
Navigate to: http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL
Click the bookmarklet while on that page, and you should see what I'm referring to.
Thanks very much in advance for any help! This has me baffled.
I was about to give up on this, but I think I found the problem. You have a hell of a lot of DOM elements going on here, but luckily that isn't the issue causing this problem.
The iframe inside DIV#onespot_nextclick needs a background color of #FFF.
Simple!