script line with pointers when you click on it - javascript

I'm trying to figure out what is the right term for it so I can research more into and learn.
I encountered this tab, where you click on one the heading the blue line and a pointer pop up to point towards the tab content... (for example when you click on Books, and then click on Articles, etc etc..
Here is the example..
http://www.sutherlandlibrary.com/tabs/library-tabs-v4.htm
I want to know how you can create that. Or what is it ? so I can start researching into it.
Thanks in advanced, I know I'm suppose to search for it first, But i dont know where to start.
Cheers

Look for CSS3 shapes, for the actual pointy-thing.
There are plugins in ever major framework for creating tabs, or you can create a custom one with some jQuery. You'll need .on('click, ...) and .fadeIn/.fadeOut
For the tab-view use the CSS position: absolute on each tab-content inside a container with position: relative.
(community wiki because I didn't actually do any work)

The one from the page you posted uses a simple image for an <li>element which has the class .current on click (jQuery).
That image is positioned with a background-position: center bottom; and overlays the horiz. azure line.

Demo: http://jsfiddle.net/trevordixon/hvBpF/
Each tab is a <li>, and the currently selected tab has a class current. You'll see they have the following CSS rule:
.tab-features .tabs-list .current {
background: url("images/feature-tab-arrow.gif") no-repeat center 27px;
}
So the tab that has the current class has a 27px tall arrow image positioned just below the bottom of the tab. They could have also done something like this instead of using a background image:
.tab-features .tabs-list .current:after {
content: "";
width: 0;
height: 0;
/* These borders make it a triangle */
border-left: 14px solid transparent;
border-top: 14px solid #0088aa;
border-right: 14px solid transparent;
}
So to implement something like this, find a good tabs script or plugin, and style the currently selected tab like that.

Related

Bootstrap ; making div look like a triangle as attached image

i've to make few divs look like as atttached image i can achieve this using background image for div like this
background:url(image.png) no-repeat left top;
but i just want to know if there is any other way to do it without using background image , please help me it its possible
i have gone through some codes for css triangle but they dont look like this so please help me to do this without images if possible
I tried reproduce your image. Do you want someting like this ?
You'll have to adjust the borders width and element proportions
Codepen
#mydiv {
height: 17px;
width: 100px;
border-top: 51px solid transparent;
border-left: 1130px solid wheat;
}
If you can be more specific about what you need or to reproduce I'll be able to provide you some solutions.
You can try a combination of border-bottom, border-left, height. Basically, a triangle with extra height. Or, you can place a triangle on top of a rectangle.
See https://css-tricks.com/examples/ShapesOfCSS/ for examples.

Fullcalendar displaying at top of page

I am an awful web programmer trying to make a website for a school club. I'm using the fullcalendar plugin to display my Google calendar's events.
The trouble is, I'm using a lot of weird little tricks to get my sidebar to work, and I think that some of the css i'm using to get my divs to display in the proper places are preventing my calendar from displaying correctly. Right now, it's crammed at the top of my div (as you can see in the events tab). I just want the calendar to display beneath the header in my #events div.
I think the culprit lies somewhere in one of these css blocks:
.container div
{
opacity: 0;
position: absolute;
top: 0;
left: 0;
padding: 10px 40px;
overflow:hidden;
}
.container
{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
width:80%;
min-height: 100%;
left:20%;
background-color: #ffffff;
position: relative;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
overflow-x:hidden;
overflow-y:scroll;
}
I play around with the "position:absolute" in .container div, but that just makes all of my divs go haywire. I'm really, really new at this. If anyone can help me figure out why this isn't working or give me tips on how to manage my sidebar more intelligently, I would appreciate it.
The site is hosted here:
http://webbox.cs.du.edu/~samkern/DU-GDS/index.php
Also, if any clarifications are needed, please ask. I hope I have given enough information.
I think I might have a sollution for you:
change
.container div {}
to
.container > div {}
What you're saying with .container div {}, is that ALL divs within the .container must have that style. This is apparently not what you want.
With .container > div, you only select the div's within the .container on the 1st level.
I.E.:
<div class="container">
<div> <!-- this div gets the styling from .container > div -->
<div> <!-- this div doesn't get styling from .container > div --> </div>
</div>
</div>
I hope I made this clear for you.
Give a height to your div, either in the HTML initially, or in the JavaScript when that populates the div with something. Since the page starts up with nothing much in the div it doesn't have any height. Later the JavaScript is adding content, but that won't change the height, so scroll bars appear instead and everything is out of sight. So give it enough height to hold all the content (use em units for the height, rather than px units, so it won't matter what text height your users are using).
Also check out your JavaScript syntax - there's an unwanted comma I think in the $(document.ready()) function, for instance, which should stop that bit of code running.
Also correct your HTML (run it through an HTML validator - there's several around). The errors aren't causing your particular problem, but needs cleaning up nevertheless. It needs a DOCTYPE eg for HTML5. The link to normalize.css should be in an href not an src attribute, and the for attributes in your labels don't all point to field names.

can you create a 3d raised box using CSS or do you need to use images?

I am trying to create a little 3d raised "panel" or "box" on my site. I found a similar example on this page where they have this page with windows that are "raised" off the page with a title box. In this case, they are using an image for the whole box and just the text in the middle is actual text on the page.
I wanted to see if this can be replicated using CSS or I should really move over to photoshop for this sort of thing and do it all as images. (if i have to)
does anyone have any suggestions on if this can be replicated using pure html and css, javascript.
As a second question, if it has to be done using photoshop and images is there are any good place to get photoshop "templates" where you wouldn't have to put this together from scratch.
Here's something similar using CSS3 for the fancy parts:
http://jsfiddle.net/RrfJb/ (view in a WebKit browser such as Chrome)
It can be made to work in "all browsers".
For Firefox it's as easy as adding the -moz prefix versions.
For IE, use CSS3 PIE for the gradients and box shadow, and this tool to generate transform CSS.
.box {
width: 300px;
position: relative;
background: -webkit-linear-gradient(top, #888 0%,#fff 30%);
box-shadow: 3px 3px 5px #666;
padding: 12px
}
.box > h2 {
background: #ccc;
float: left;
padding: 8px 16px;
position: relative;
top: -18px;
left: -21px;
-webkit-transform: rotate(-2deg);
font: bold 18px sans-serif
}
.box > p {
clear: both
}
<div class="box">
<h2>Welcome to website!</h2>
<p>Lorem ipsum dolor sit amet..</p>
</div>
You can do a lot with CSS3 including rotation, gradients and different fonts. The downside is that none of it apart from font embedding works in IE without various complexities.
You can't really do irregular bitmaps graphics like the paper crumpling, so you'll need an image for that.
Right now, I'd say that unless all the data is coming from a CMS, then the best way is to use an image for this, and possibly embed a font for the name at the bottom.
The second best way would be to just use the paper image, and to use CSS3 for the rest. Take a look at http://css3please.com/ for a good place to see the various properties.
When using CSS3 you always have to be aware that people using old browsers may not be able to see what you intend. Using it progressively is the best way. Check out this article.
In this particular case CC3 can add a drop-shadow. So if your OK with people who're using older browsers not being able to see the box shadow, go with CSS3. Otherwise use an image.

Javascript/CSS/PHP Hoverbox with various locations on mouseover

I'm trying to get various locations to appear on a image with mouseovers. So basically I have an image and when you hover over a link nearby a hoverbox appears at the location specified in CSS on the image. However I'm trying to get it to happen with multiple links without creating code for each CSS box.
I have something like 50 links and and when I hover over one I want to be able to pull from a db or text file to grab the location where it should create a hover on the image. My original thought was using PHP to help pull in the information from a file, put it into an array and then having the CSS update on the fly. This seems doable if the user just clicks the link as then I can tell CSS what place in the array to look for the location. I am unsure how I could get this to work with mouseovers if at all possible.
The CSS code is very basic at the moment as shown below.
#box {
position: absolute;
top: 100px;
left: 200px;
background-color: #ffffff;}
Let me know if anything doesn't make sense or if I'm just forgetting something.
Thank you!
Ok, so what you're trying to do is called a CSS sprite. Here's what you want (my example is orthogonal to your code, but teaches the principle):
.link {
width: 50px;
heigh: 50px;
float: left;
text-indent: -9000px;
background-color: transparent;
background-image: url(path/to/sprite.png);
background-repeat: no-repeat;
}
.link#one {
background-position: 0px 0px; /* This one is top left on the image. */
}
.link#two {
background-position: 0px 50px; /* This one is 50px from top and 0px from left on the image. */
}
You can see where to go from here (and you don't need to use .link#one. I just used it for example purposes. You could just use #one, or even a class .one.
Practice with this and you'll get how it works soon enough. Here's some sample HTML:
<a id="one" class="link">One</a>
<a id="two" class="link">Two</a>
Just through all that together, and make your image a 100px tall by 50px wide .png file with 50px x 50px for each link.

Highlight a section of an image in JavaScript

I run a small webpage that allows users to click on various links using image maps. I'd like to highlight the section that a user clicks on to give some feedback to the user (they may be clicking on several different parts rapidly).
Is there a way I can invert (or otherwise highlight) a small section of an image JavaScript?
Instead of using image maps, you could try this CSS method:
Use a transparent <div> on top of each "image-map" part (link), and then use the CSS :hover pseudo-class to handle the highlighting.
CSS:
#image {
position: relative;
width: 400px;
height: 100px;
background-image: url(image_map.png);
}
#map-part {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
background-color: transparent;
}
#map-part:hover {
background-color: yellow; /* Yellow Highlight On Hover */
opacity: 0.2;
filter: alpha(opacity=20);
}
HTML:
<div id="image">
<a id="map-part" href="http://www.example.com/"></a>
</div>
Note that this will only work for rectangular links.
Take a look at jQuery MapHilight.
I'm not sure it does exactly what you need, but you can achieve that with minor tweaking.
How about overlaying a semi-transparent <DIV> block over the clicked area to highlight it?
There are many way,
In a d fashion way, break down your images into many smaller pieces and using table to combine them. After that, by using javascript to replace thr "src" attribute for the highlight effect.
In another CSS way, use CSS to clip the alt. image on top of the original, and control which area should be visible.
It is better to have a single image for all rather then many small images to speed up and user will get it without delay by network.

Categories