Little background: The site is for a university assignment, we are not allowed to use 3rd party libraries such as bootstrap etc. I thought I had a solution but i can only get it to work for 2 buttons (showing or hiding the opposite one) but not multiple. I will have at least 10 buttons.
I have tried to research on stack overflow but could not find a solution. Here is my HTML+CSS. Home is the default page and the rest should become visible in the white space below when their button is clicked. This is a products page.
JSFIDDLE: https://jsfiddle.net/33n7yb5h/
Any help would be greatly appreciated, it does not need to be a written solution but simply pointing me in the right direction will do... I have little to no javascript knowledge so I'm not entirely sure what I should be googling in the first place...
<html>
<head>
<title>Design</title>
<link rel="stylesheet" type="text/css" href="css/store.css">
<script type="text/javascript" src="javascript/js.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li id="left">Company</li>
<li id="left">Sales</li>
<li id="left">About</li>
<li id="left">Contact</li>
<li id="right1">Cart</li>
<li id="right2" onclick="myFunction()">Geolocate</li>
</ul>
<dialog id="myDialog">Your IP address: <?php echo $_SERVER['REMOTE_ADDR']; ?></dialog>
<div id="items">
<ul>
<li id="left">Home</li>
<li id="Cars">Super Cars</li>
<li id="Cars">Topic 2</li>
</ul>
<div id="homepage">
<span><p> Welcome to the store</p></span>
</div>
<div id="showCars">
<div class="productBox">
<div class="productPicture">
</div>
</div>
</div>
</div>
</body>
</html>
ul{list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #363377; border-bottom: 1px solid white;}
li a{display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}
#left, #Cars{float: left; border-right:solid 1px #fff;}
#right1, #right2{float: right;}
#left:hover, #right:hover, #Cars:hover{background-color: #555;}
body{
margin: 0px;
padding: 0px;
font-family: tahoma;
background-image: "/img/bg.jpg";
}
p{
text-align: center;
}
#items{
display: inline-block;
border: 1px solid black;
padding: 10px;
margin-top: 25px;
margin-left: 225px;
margin-right: 225px;
position: absolute;
width: 80%;
height: 80%;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
background: white;
overflow: hidden;
}
.productBox{
border: 2px solid black;
width: 200px;
height: 300px;
margin-top: 5px;
text-align: center;
}
.productPicture{
border: 1px solid black;
width: 90%;
height: 150px;
margin: 0 auto;
margin-top: 5px;
padding: 5px;
display: inline-block;
}
#showCars{
display: none;
}
Here is some pseudo code if I understand correctly what you are needing: There are tons of ways to do this, and I don't have much to go on, so here is just 1 example.
<div>
<button onclick="cars()" value="show cars"></button> <!-- if they click this button call the function cars() -->
<button onclick="boats()" value="show boats"></button>
<ul>
<li id=IDname0></li>
<li id=IDname1></li>
<li id=IDname2></li>
</ul>
</div>
<script>
var cars = ["Saab", "Volvo", "BMW"]; //create an array of values you want to load into your tags
var boats = ["Fishing", "Raft", "Other"];
var x = 0;
Function cars()
{
// for each element in cars,
for ( x=0; x<cars.length; x++ )
{
//acquire the elemt by the ID name, and REPLACE the inner HTML with the value at array cars element x. if you want to add to the inner HTML, use += instead of just =
Document.getElementById('IDname'+x).innerHtml = cars[x]; // will acquire 'IDname0' , 'IDname1', etc.. each tag with an ID of that name ( from your <li> above
}
}
Function boats()
{
for ( x=0; x<cars.length; x++ )
{
Document.getElementById('IDname'+x).innerHtml = boats[x];
}
}
</script>
You can use a query string, and then make the buttons link to the query string parameter which checks the string and defines what each page/button will do. This will allow you to have the page html css etc mostly the same except for the parts that change on button click.
Many sites do this.
example: https://www.etsy.com/ca/search?q=wallet
I found a solution here: http://www.w3schools.com/howto/howto_js_tabs.asp for anyone else who is looking for the same thing!
Related
I have the firstname, lastname and a pencil icon beside them on my web page. I need to press to pencil and can change text to another one. Please assist to solve this problem
Here is html
<a class="nav-link left-panel-txt" id="left-panel-txt" href="/profile">
<div class="sb-nav-link-icon"></div>
<span class="dashboard">Firstname Lastname</span><img src="/static/img/pencil.svg" style="width: 5%; height: 5%; margin-left: 10px;">
</a>
Thank you.
This is a demo of what you asked.
There's a label displaying static text Firstname Lastname and when you click on the pencil next to it, you have the opportunity to edit that value until you click again the pencil and the value becomes read only.
I slightly changed your html and added jQuery (since you listed it in your question tags) and Fontawesome to add an icon of a pencil (since otherwise your pencil image wasn't available).
function onToggleClick(event){
if ( $(event.target).hasClass('editing') ){
$(event.target).removeClass('editing');
$(event.target).prev('.dashboard').removeClass('editing');
$('.dashboard').attr('contenteditable', false);
}
else{
$(event.target).addClass('editing');
$(event.target).prev('.dashboard').addClass('editing');
$('.dashboard').attr('contenteditable', true);
}
}
$(document).ready(()=>{
$('.edit_toggle').click(onToggleClick);
});
.dashboard{
display: inline-block;
border: solid 1px lightgray;
padding: 2px 5px;
}
.dashboard.editing{
border: solid 1px black;
}
.edit_toggle i{
pointer-events: none;
}
.edit_toggle{
display: inline-block;
width: 5%;
height: 5%;
margin-left: 10px;
border: solid 1px lightgray;
text-align: center;
padding: 2px 2px;
cursor: pointer;
}
.edit_toggle.editing{
background: lightgray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dashboard">Firstname Lastname</div>
<div class="edit_toggle">
<i class="fa-solid fa-pencil"></i>
</div>
I am currently working on a project and I want to display something similar to Apple's stocks app, how a single row has a name followed by a current number and then a +- indicator of how much the stock either went up or down from before. I really like this row design against a black background and think its easily readable, so that's why I want to do it. At the moment I am trying to create a single row of HTML combined with CSS that will give me this kind of look and feel, a custom list item if you will.
I have the positive\negative indicators made but cannot figure out how to space and include text to the left of this element within the same list item row. Ideally, the layout should be something like this:
STOCKNAME PREVTOTAL STOCKPOSORNEG
All of these fields should be in the same list item row. Since I've had some trouble with this approaching using the un-ordered list I could also explore a table option but wanted to see if there was a way it could possibly be done that way first. Below is what I was experimenting with via the TryIt Editor:
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 7px;
background: #80ff80;
padding: 20px;
width: 90px;
height: 10px;
color: #FFF;
}
#makeLeft {
float: left;
}
#makeRight {
float: right;
}
#listitem {
list-style: none;
background-color: black;
border: .5px solid #efeff5;
padding: 1px;
}
</style>
</head>
<body>
<ul id="mylist">
<li id="listitem">
<p id="rcorners1">
<span id="makeLeft"><strong>+</strong></span>
<span id="makeRight"><strong>1234.00</strong></span>
</p>
</li>
</ul>
</body>
</html>
How does this work out for you?
I tried to get it as close to the original stocks app as possible. Some of the font sizes might be a bit off, but this is probably as good as you're going to get.
span{
font-family: arial;
font-size: 24px;
color: #fff;
}
.container{
width: 400px;
height: 200px;
background: #040404;
}
.row{
position: relative;
width: calc(100% - 20px);
height: 29px;
padding: 13px 10px 13px;
}
.row.highlighted{
background: #383838;
}
.name{
float: left;
}
.price{
display: inline-block;
margin-right: 3px;
}
.pn{
padding-right: 5px;
}
.pn-con{
position: absolute;
top: 10px;
right: 10px;
}
.main-pn{
display: inline-block;
height: 29px;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
border-radius: 5px;
background: #FD3C2F;
}
<div class="container">
<div class="row">
<span class="name">DOW J</span>
<div class="pn-con">
<span class="price">18,109.80</span>
<div class="main-pn">
<span class="pn">-</span>
<span class="val">53.19</span>
</div>
</div>
</div>
<div class="row highlighted">
<span class="name">MSFT</span>
<div class="pn-con">
<span class="price">47.58</span>
<div class="main-pn">
<span class="pn">-</span>
<span class="val">0.04</span>
</div>
</div>
</div>
</div>
Here's a working JsFiddle for it!
It's pretty customizable, all you need to do is copy & paste the rows, and alter the values within the spans!
Here's an image of the actual stocks app for reference!
Hope it helps! :-)
It's me again :) today am trying to develop a sliding divs with text navigation, i mean that i can edit the nav not only generated bullets. say that we have three divs containing images and text and i need to center a navigation menu of three different links.. also if you can help me in that, if the current slider is number 3 and I clicked on nav item number 1 I want it to jump to 1 without seeing 2 during the scrolling
here is the original code i need to learn how to develop it http://www.alfaromeo.co.uk/models/giulietta#dynamism
links to a similar article or any help in general would be very appreciated
.item--mobile .slider-item__wrap{height:300px;overflow:hidden}
.row-slide,.row-wrap{*zoom:1;clear:both;position:relative}
.row-slide:before,.row-slide:after,.row-wrap:before,.row-wrap:after{content:" ";display:table}
.row-slide:after,.row-wrap:after{clear:both}
.row-slide .content__text .animated-line,.row-wrap .content__text .animated-line{top:12px}
#media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4}
.slider-menu>ul,.slider-menu>ul>li{display:inline-block}
.slider-menu>ul{padding:0;font-size:0;width:100%}
.slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center}
.slider-menu>ul>li:first-child{position:relative}
.slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25}
.slider-menu>ul>li:last-child{border-right:0}
.slider-menu>ul>li.active{background-color:#8f0c25;color:#fff}
}
#media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px}
}
<div class="row-slide">
<div class="slider-item-wrap">
<div class="slide current">
images and text goes here 1
</div>
<div class="slide">
images and text goes here 2
</div>
<div class="slide">
images and text goes here 3
</div>
</div>
<div class="slider-menu">
<ul>
<li class="current"><a>link to slide 1</a></li>
<li><a>link to slide 2</a></li>
<li><a>link to slide 3</a></li>
</ul>
</div>
</div>
It looks like you want to develop a carousel.
There are several javascript and jQuery carousels, for example Slick and
jCarousel
It will be much easier to use a plugin or somebody else's solution for this. Download one of the examples and follow the site's instructions for how to integrate it into your own site.
Otherwise, use your browser's Developer Tools or script debugging feature to study the script for that site you pointed to. You can also study the code of jCarousel and Slick, for example, or any library.
Here is a very simple example of a custom carousel I threw together that you can study. It uses progressive enhancement and takes advantage of scrolling so that even without javascript users still get a decent experience and can flip through content. (Though you could easily tailor it to hide the scrollbar by swapping images instead, for example).
The main parts are: 1) styling so that only one content panel shows at a time, and 2) the logic to animate the sliding of the panels when user navigates.
$(".slider-menu a").on("click", function() {
var $current = $(".slide.current");
var $li = $(this).closest("li");
var idx = $li.index();
if (idx !== $current.index()) {
$(".slider-menu li.current").removeClass("current");
$li.addClass("current");
var $next = $(".slide").eq(idx);
$current.removeClass("current");
$next.addClass("current");
var $carousel = $(".slider-item-wrap");
var left = $carousel[0].scrollLeft + $next.position().left;
$carousel.animate({
scrollLeft: left
}, 500);
}
});
html,
body,
.row-slide,
.slider-item-wrap {
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 0;
color: #fff;
overflow: hidden;
}
.row-slide {} .slider-item-wrap {
white-space: nowrap;
overflow: auto;
overflow-y: hidden;
}
.slide {
width: 100%;
height: 100%;
font-size: 24px;
display: inline-block;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.slider-menu {
position: absolute;
margin: 0 auto;
width: 100%;
margin: 0;
border: 0;
padding: 0;
bottom: 20px;
}
.slider-menu ul {
list-style: none;
overflow: auto;
margin: 0 auto;
border: 0;
padding: 20px;
text-align: center;
}
.slider-menu li {
padding: 4px 20px;
display: inline-block;
text-align: center;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
.slider-menu li:hover {
background-color: rgba(255, 255, 255, 0.7);
color: #222;
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.slider-menu li.current,
.slider-menu li.current:hover {
background-color: rgba(0, 0, 0, .2);
color: #333;
box-shadow: 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-slide">
<div class="slider-item-wrap">
<div class="slide current red">
images and text goes here 1
</div>
<div class="slide blue">
images and text goes here 2
</div>
<div class="slide green">
images and text goes here 3
</div>
</div>
<div class="slider-menu">
<ul>
<li class="current"><a>link to slide 1</a>
</li>
<li><a>link to slide 2</a>
</li>
<li><a>link to slide 3</a>
</li>
</ul>
</div>
</div>
I need your help,
Without using long and code resource intensive jQuery and Javascript context menu plugins, how can one, just using plain & simple jQuery code to basically take my div (which has the id: 'right-click-menu') and bind a right click action to the other div which had the id: box1?
Here is a fiddle: http://jsfiddle.net/ALAHX/
Here is the HTML markup:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#right-click-menu {
width: 150px;
border-top: 1px solid rgb(212,208,200);
border-left: 1px solid rgb(212,208,200);
border-right: 1px solid rgb(64,64,64);
border-bottom: 1px solid rgb(64,64,64);
font-family: tahoma;
font-size: 8.5pt;
box-shadow: 2px 2px 2px rgb(142,142,142);
}
#right-click-menu ul {
list-style-type: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid rgb(128,128,128);
border-bottom: 1px solid rgb(128,128,128);
background: rgb(212,208,200);
margin: 0;
padding: 2px
}
#right-click-menu ul li {
padding: 4px;
}
#right-click-menu li:hover {
color: #fff;
cursor: pointer;
background: rgb(10,36,106);
}
</style>
</head>
<body>
<div id="right-click-menu">
<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
</ul>
</div>
<br>
<div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>
</body>
</html>
Javascript:
$(document).ready(function() {
$('#box1').mouseup(function(event) {
if (event.which == 3) { // right click
$('#right-click-menu').offset({ top: event.pageY, left: event.pageX });
}
});
});
HTML: Be sure to include position: absolute for the menu to allow it to move around, and oncontextmenu to return false to prevent the default browser right-click.
<div id="right-click-menu" style="position:absolute;" oncontextmenu="return false;">
<ul>
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
</ul>
</div>
<br>
<div id="box1" style="border: 1px solid red; width: 200px; height: 50px;"></div>
Fiddle:
http://jsfiddle.net/ALAHX/1/
You'll want to include things like hiding the menu at first and when options are selected, but this should get you started.
Looking at you comment, you may or may not have included jQuery in your project, which is a Javascript addon. The above code is written using jQuery, so make sure to include a <script> link to it in your HTML.
$(document).ready(function(){
$('div').click(function(){
$('#box1').slideToggle('slow');
});
});
Maybe something like this?
Well, I´m trying to do a basic jQuery example that expands a search bar on mouse click, and I dont understand why nothing is happening with my code. I have a basic jQuery to show the input when I click in my (button class="expand"), but when I click in this button the input that is setting in css with display:none dont appears.
My basic jQuery script:
<script type="text/javascript">
$('.expand').click(function() {
$('#test').show(500);
});
My html:
<nav id="menu">
<ul>
<li>Home</li>
<li>Products</li>
<li>Contacts</li>
<li id="sb-search" style="float:right; list-style:none; height:20px;">
<div id="pesquisar-container">
<span id="pesquisar" class="form-container cf">
<form name="form1" >
<input id="test" type="search" placeholder="Pesquisar..." required="required" onfocus="if(this.placeholder == 'Search...') {this.placeholder=''}" onblur="if(this.placeholder == ''){this.placeholder ='Search...'}" />
<button class="expand" type="submit"><i class="fa fa-search"></i></button>
</form>
</span>
</div>
</li>
</ul>
</nav>
My css:
.form-container input {
width: 150px;
height: 25px;
padding: 5px 5px;
float: left;
font: bold 15px;
font-size:15px;
font-family:'bariol_lightlight';
border: 0;
background: #f3f3f3; /*#fcfcfc se o fundo for branco, ver as diferenças */
border-radius: 3px 0 0 3px;
margin-top: 9px;
color:#000;
display:none;
}
.form-container button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 25px;
width: 35px;
text-transform: uppercase;
background: #363f48;
border-radius: 0 5px 5px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
margin-top:9px;
}
Try to wrap your code inside DOM ready handler $(function() {...});
$(function() {
$('.expand').click(function() {
$('#test').show(500);
});
});
There can be the couple of reasons.
1. Put your click listeners on document ready
2. Better assign some id to button. let's say its btnSubmit.
3. following methods can be used to show or hide the elements.
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
or its better to use toggle.
$(document).ready(function() {
$("#btnSubmit").click(function(){
$("#test").toggle();
});
});
Hope this will help.