Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm creating a one page website right now and I want to add an randomize image every time that the page was load. Before I'm using PHP to randomized my carousel by using ORDER BY rand() while selecting data. Right now I am looking for a javascript code to randomized images NOT USING ANY DATABASE. I accept any suggestion, my code are the following below:
<!-- start home -->
<section id="home">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h1 class="wow fadeIn" data-wow-offset="50" data-wow-delay="0.9s">We make paper products that are <span>awesome</span></h1>
<div class="element">
<div class="sub-element">Hello, this is WhatWeAre</div>
<div class="sub-element">Paper for everyone</div>
<div class="sub-element">Contact us and we make your products while conserving environment </div>
</div>
<a data-scroll href="#about" class="btn btn-default wow fadeInUp" data-wow-offset="50" data-wow-delay="0.6s">GET STARTED</a>
</div>
</div>
</div>
</section>
<!-- end home -->
<style type="text/css">
#home{
background: url('../images/home_1.jpg') no-repeat;
background-size: cover;
padding-top: 160px;
padding-bottom: 100px;
min-height: 650px;
}
</style>
Okay, I got an answer with some sites. Not making any changes with my CSS stylesheet and NOT even using database. Here the following codes:
<script type="text/javascript">
if (document.getElementById) {
window.onload = swap
};
function swap() {
var numimages=7;
rndimg = new Array("images/home.jpeg","images/home-bg.jpg","images/home_1.jpg");
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("home").style.backgroundImage = "url("+ randomimage +")";
}
</script>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 9 months ago.
Improve this question
I tried many solutions to remove the text-decoration from p but without any progress.
The HTML looks like this
<div class="container-fluid my-container align-items-center">
<div class="row my-row">
<div class="col-md-3 ">
</div>
<div class="col-md-9 ">
<div class="thumbnail d-flex justify-content-center imagePreview">
<a href="#############" target="_blank">
<img src="../assets/img/thumbnails/Apelles_230x177cm_2020__.jpg" alt="" style="width:400px;">
<div class="caption">
<!--########### Here is the p-->
<p id="captionStyle">Apelles<br>2020</p>
</div>
</a>
</div>
Browsers automatically add underscores to links for accessibility. To clear it, you can use reset.css or write this snippet:
a { text-decoration: none }
P.S. You can search CSS Reset, Normalize, and browser styles for more information.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
Is there a way i can make the scrolling continue from the first box instead of ending at the 8th box?
Or making overflow hidden and adding one button each at the left and right which will make the slide continue from the first box after reaching the 8th box?
.slide-container{
display: flex;
width: max-content;
}
.box{
width: 300px;
height: 100px;
background-color: green;
margin-right: 5px;
}
<div class="slide-container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So i have this html code here for my main menu:
<div id="main-container">
<div id="main-wrapper">
<div id="logo">
<h1 id="title">portfolio</h1>
<h2 id="ready">ready</h2>
</div>
<div id="selection">
<ul>
<li>about</li>
<li>resume</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
So what I want to do is add some animation to my website. For instance, when i click on the link "about" I want a div to show up, which is this one:
<div id="secondary-container">
<div id="about-wrapper">
<div id="header">
<h1 id="about-heading">about</h1>
</div>
<div id="information">
<h2 id="introduction">introduction:</h2>
<p id="paragraph">hello! welcome to my website!</p>
</div>
<div id="content">
<h2 id="my-information">my information:</h2>
<ul>
<li>name: <span>danny moon</span></li>
<li>age: <span>21</span></li>
<li>sex: <span>male</span></li>
<li>location: <span>new jersey</span></li>
</ul>
</div>
<div id="feature">
<h2 id="my-skills">my skills: </h2>
<ul>
<li>html: <span>50%</span></li>
<li>css: <span>50%</span></li>
<li>javascript: <span>30%</span></li>
<li>python: <span>60%</span></li>
</ul>
</div>
</div>
</div>
My jquery code right now is very simple
$(document).ready(function(){
$('#about').click(function(){
$('#secondary-container').show();
});
});
However, when i press the "about" link, nothing happens. Any suggestions? If you guys need my full html/css/jquery/js folders
Here is a link using dropbox:
https://www.dropbox.com/sh/c8abu7mptjz2dkk/AABZWS-dPY7csAxIRgewP6H2a?dl=0
Thank you.
Im not sure if you already found this, but in the files that you linked you have some minor syntax errors.
You are missing the closing brackets '>' at the end of the script tags. It should look like this:
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui.js"></script>
<script type="text/javascript" src="../js/showhide.js"></script>
Since you have the dummy href="#", when you click your link, it is probably still acting like a link - adding the "#" anchor to your URL. You should prevent the default action of a link using event.preventDefault():
$(document).ready(function(){
$('#about').click(function(event){
event.preventDefault();
$('#secondary-container').show();
});
});
Note the event param passed to your click event function.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm learning all the webdev, now for gaming community purpose I'm making a website which is similar to periodic table. It cointains for now about 25 "elements" but only blocks displayed without any info.
I want to make it open a dialog box (can't find any other name for it), similar to wowhead's table which contains item's info but I wan't it open on click, not on hover, and want it to act like lightbox, open on middle of screen with background grayed out.
Number of elements will rise to about 80, and here is my question:
Should I make for every such an element html file, which will be dispalyed in dialog, or use data base for it?
I think Bootstrap is probably to simplest solution for the layout and the Modal (the popup box).
You really only need one modal.
You can give each of your "blocks" a data attribute and store an item id there.
Then, when a user clicks a block, get the id from the attribute
use the id to get the information for the item from your database (myriad of ways to do that)
then populate that info into the modal.
Here's a contrived example (without the getting info from database part which could vary greatly depending on how you want to do that.)
$('.container').on('click', '.block',function(){
var id=$(this).data('id');
$('#blockId').html(id);
$('#myModal').modal({show:true});
});
/* CSS used here will be applied after bootstrap.css */
.block{
background-color:#ccc;
height:100px;
width:100px;
cursor:pointer;
}
#blockId{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-2"><div class="block" data-id="123"></div></div>
<div class="col-xs-2"><div class="block" data-id="456"></div></div>
<div class="col-xs-2"><div class="block" data-id="789"></div></div>
<div class="col-xs-2"><div class="block" data-id="234"></div></div>
<div class="col-xs-2"><div class="block" data-id="567"></div></div>
<div class="col-xs-2"><div class="block" data-id="678"></div></div>
</div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>The id of the block you clicked was <span id="blockId"></span> use that to get stuff from your database</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I was wondering if there was a way of making a side bar with js, html or bootstrap that has a single row of images under drop down tabs with its own scroll bar. I hope i'm specific enough and you get a rough idea of what i would like to achieve
I'm not asking for you to write code just to be pointed in the right direction
Bootstrap makes this all possible, all of the info you need to build the tabs is available here. Obviously you need to call in the Bootstrap JS and CSS file into your HTML page.
To make a .tab-pane area scrollable add overflow:auto;. Add white-space: nowrap; to make your images inside that tab run horizontally.
Demo on Codepen.
Hope that points you in the right direction.
aside {
width: 300px;
}
#one {
overflow: auto;
white-space: nowrap;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<aside>
<ul class="nav nav-tabs">
<li>One</li>
<li>Two</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="one">
<img src="http://placehold.it/200x50">
<img src="http://placehold.it/300x50">
<img src="http://placehold.it/400x50">
<img src="http://placehold.it/100x50">
<img src="http://placehold.it/50">
</div>
<div role="tabpanel" class="tab-pane" id="two">
I am another Tab!</div>
</div>
</aside>