I have sort of a image carousel which automatically and on hover swaps image thumbs with a big image header. And this is working perfectly, but now I have realized that I want to add some indication to each thumb currently displayed. I thought I could apply div.container img.current and give it some properties, values.. but it did not work.
So I thought I could ask you all for a good valid quick solution.
Here is my code
<div class="container-thumbs">
<div class="big-image-thumbnail">
<a href=".html"onmouseover="document.getElementById('bigImage').src='.jpg'">
<img src=".jpg" /></a><p>Title</p>
</div>
use j-query toggleClass() function
here is an example
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>
</body>
Related
TODO: Create an AngularJS directive to display list of images in an endless, smooth left to right scrolling loop. To keep it simple you can assume the fixed height/width for the images indicated above.the work should be done in the directive and styles without adding supporting libraries or plugins.
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
// list of images to scroll, each image is 280px x 200px
$scope.images = [
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost®%20Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Premium Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Premium Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby® GT350R]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby GT350®]/EXT/4/vehicle.png'];
})
.directive('myScroller', function () {
return {
// >> your directive code <<
};
});
.container {
width: 700px;
margin: 0 auto 100px;
padding: 20px;
overflow: hidden;
}
.container .image-list {
height:200px;
width:2240px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="container">
<h1>Static Images</h1>
<div class="image-list">
<img ng-repeat="image in images" ng-src="{{image}}" />
</div>
</div>
<div class="container">
<h1>Scrolling Images</h1>
<!-- use my scroller directive, see script.js file for directions -->
<div my-scroller="images"></div>
</div>
</div>
</div>
</body>
</html>
I want to increase C and I . I also use ::first-text{}. It works Now, how can i increase I.
<p>Creating and Implementing</p>
<center>
<p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
<style>
p::first-letter{
font-size:40px;
}
</style>
<span class="a">Creating</span> <span>and</span> <span>Implementing</span>
</p>
</center>
Its very simple, You have to change you p tags like
<p>
<span class="highlight-first-letter"><b style="font-size:20px;">C</b>reating</span> <span>and</span> <span class="highlight-first-letter"><b style="font-size:20px;">I</b>mplementing</span>
</p>
your output is look like
I'm not sure about first-text, but first-letter should work for the C.
For the I, you would have to wrap it in a span and give it a class unfortunately.
https://caniuse.com/#feat=css-first-letter
--Update--
I'm not sure if you aware, but style tags are not 'scoped'. This means that all <p> tags will have their first letters increased, is this what you want?
Also, the center tag is deprecated and should not be used.
<style>
p{
text-align: center;
font-size: 32px;
color: #424242;
margin-top: 15px;
font-family:Rockwell;
}
.highlight-first-letter::first-letter{
font-size:40px;
display: inline-block;
}
</style>
<p>
<span class="highlight-first-letter">Creating</span> <span>and</span> <span class="highlight-first-letter">Implementing</span>
</p>
i have done it with jquery it can be achieved also in javascript bydocument.getelementbyid
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=o>c js isj kl</div>
<script>
var txt = $('#o').text();
var new_text = txt.replace(/i/gi, 'I') ;
$('#o').text(new_text.replace(/c/gi,'C'));
</script>
after your update i havev found that in css
introduce span in between your text
<p>Creating and Implementing</p>
<center>
<p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
<style>
p::first-letter{
font-size:40px;
}
.l::first-letter{
font-size:40px
}
</style>
<span class="a">Creating</span> <span>and</span> <span class=l>Implementing</span>
</p>
</center>
I have the following code.
<html>
<head>
<style>
.fb{
position: relative;
right:-1000px;
}
.info{
position:relative;
}
</style>
</head>
<body>
<div id="info">
About Us |
Privacy Policy
<a id = "fb" href="https://www.facebook.com/xyz" target="https://www.facebook.com/xyz"> <img src="../images/facebook.png" height = 16, width = 16 /> </a>
</div>
</body>
</html>
I want to move the fb link to the right corner. I guess my styling is not working. Or am I going wrong somewhere?
You have defined a class in your stylesheet
.fb{
position: relative;
right:-1000px;
}
.info{
position:relative;
}
so while using it you should do
<div class="info">
...
</div>
<div class="fb">
...
</div>
OR if you want to use id then
#fb{
position: relative;
right:-1000px;
}
#info{
position:relative;
}
<div id="info">
...
</div>
<div id="fb">
...
</div>
first don't use spaces in attr="smth". Also you use id not class so css selector should be #fb , not .fb
Use this #fb{
float:right;
}
You are using class (.class) selectors instead of id (#id) selectors in your css
The styles are not reflecting because you are using . instead of #. . is used while dealing with class, for id use #.
Try this:
#fb{
position: fixed;
right:10px;
}
#info{
position:relative;
}
Jsfiddle
<div id="info">
About Us |
Privacy Policy
<a id ="fb" href="https://www.facebook.com/xyz" target="https://www.facebook.com/xyz">
<img src="../images/facebook.png" height = 16, width = 16 alt="FB"/> </a>
</div>
CSS
#fb
{
float:right;
}
.info
{
position:relative;
}
There were no class named fb. DEMO
For some reason, the buttons on the page I'm working on won't center.
Here's what I've got for HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="chaos.css"/>
<script type="text/javascript" src="jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="Chaos.js"></script>
<title>MTG Chaos Roller</title>
</head>
<body>
<div class="button">
<input type="submit" value="Roll Chaos">
<input type="submit" value="Roll EnchantWorldLand">
<input type="submit" value="Roll PersonaLand">
<input type="submit" value="Roll WackyLand">
</div>
</body>
</html>
CSS:
body {
background-color: black;
};
.button {
text-align: center;
};
I dunno. It seems to work on other people's stuff. I'm sure it'll become clear once it's explained what I'm doing wrong.
You've incorrect CSS. You don't need to terminate CSS with semi-colon(;).
Use this. Demo
body {
background-color: black;
}
.button {
text-align: center;
}
Try:
body {
background-color: black;
text-align: center;
}
Currently you are setting the buttons to center the text inside of them, when you change it to the above, you are ensuring that elements on the page will be centered.
Trying to figure out how to do this. I have the style but I'd like something to happen after I click the tabs. I would like the div with the tab class names to show and hide when i click the tabs. I'm assuming how that would work. Right now when I click the tabs nothing happens.
Here's my HTML
<style type="text/css">
ul.tabs {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.tabs>li {
float: left;
padding: 10px;
background-color: lightgray;
}
ul.tabs>li:hover {
background-color: lightgray;
}
ul.tabs>li.selected {
background-color: lightgray;
}
div.content {
border: 1px solid black;
}
ul { overflow: auto; }
div.content { clear: both; }
</style>
<body>
<ul class="tabs">
<li>Description</li>
<li>Specs</li>
</ul>
<div class="pane">
<div class="tab1">
<div><h2>Hello</h2></div>
<div />
<div>Hello hello hello.</div>
<div />
<div>Goodbye goodbye, goodbye</div>
<div />
<div />
</div>
<div class="tab2" style="display:none;">
<div><h2>Hello2</h2></div>
<div />
<div>Hello2 hello2 hello2.</div>
<div />
<div>Goodbye2 goodbye2, goodbye2</div>
<div />
</div>
</div>
<div class="content">
This should really appear on a new line.
</div>
</body>
Standard answer: you can't. There is no way to do this with purely HTML/CSS2, unfortunately. We can make drop-downs in CSS with the :hover psuedo-class, but there's no equivalent for clicks. Look into one of these Javascript-based solutions.
Secret answer: CSS3 [kind of] supports this. But you have to create radio buttons [weird], and it's not supported in IE7/8. If you dare...
And if you don't mind using Javascript, here's a quick solution. Reformatted your HTML, first of all. No need to put <h2>s in <div>s, and use <br /> for breaks—that's what it's there for. Also, I changed the tab <div>s to use id's instead of classes. If you have unique identifiers for an element, use id.
<ul class="tabs">
<li>Description</li>
<li>Specs</li>
</ul>
<div class="pane">
<div id="tab1">
<h2>Hello</h2>
<p>Hello hello hello.</p>
<p>Goodbye goodbye, goodbye</p>
</div>
<div id="tab2" style="display:none;">
<h2>Hello2</h2>
<p>Hello2 hello2 hello2.</p>
<p>Goodbye2 goodbye2, goodbye2</p>
</div>
</div>
<div class="content">This should really appear on a new line.</div>
Didn't touch your CSS.
For Javascript, I recommend using jQuery. It really simplifies things.
All you need are these lines of code:
$(document).ready(function() {
$("ul.tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
});
})
Basically, once the page is ready [has loaded], look for every link that's a child of a tabs ul. Attach a function that runs each time this link is clicked. When said link is clicked, hide all the tabs in the .pane div. Then, use the link's href to find the proper tab div and show it.
fiddle: http://jsfiddle.net/uFALn/18/
Because of the floated <li> elements your <ul> element is zero height.
Try adding ul { overflow: auto; } and div.content { clear: both; } to your CSS
Thanks benesch. It helped me too.
One can also add return false to prevent that jerky jump to the anchor. For instance:
$("ul.tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
return false;
});