Scroll a div to bottom automatically - javascript

I have a chat module for my website. I have a div where my messages appear, and I want it to scroll to the bottom of the div when I open the chat page. Most recent messages appear at the bottom.
Here is the HTML and CSS code am using
/CSS/
#pageMiddle_message{
margin-left:280px;
background:#FFF;
width: 700px;
height: 592px;
border-radius: 5px;
padding-bottom:0px;
position:fixed;
border: orange 2px solid;
}
#message{
width:auto;
height:100px;
}
#chat{
background:orange;
color: #fff;
}
#no_chat{
background:orange;
color: #fff;
height:42px;
line-height:0.11857143em;
}
#head_chat{
color:#fff;
line-height: 0.82857143em;
}
.sub_paneln{
text-transform:capitalize;
color: #444;
font-weight:500;
background-size: 1px 1px;
line-height: 0.82857143em;
list-style:none;
}
.my_message{
float:right;
background-color:#DFFFFB;
list-style:none;
border-radius:8px;
border: #39F 1px solid;
}
.their_message{
float:left;
background-color:#0ADEF5;
border-radius:8px;
list-style:none;
border: #06F 1px solid;
position:inherit;
}
.line_message{
color: #444;
font-weight:500;
background-size: 1px 1px;
line-height: 0.82857143em;
list-style:none;
}
.message_list{
background:#fff;
padding:2px;
height:445px;
max-height:600px;
overflow-y:auto;
position:relative;
}
.message_body{
border-radius: 5px;
height:auto;
}
#text_message{
width:670px;
margin-top:2px;
margin-left:23px;
background-color:#D2D2D2;
padding:0px;
}
/*HTML*/
<div class="message_body">
<div id="message_list" class="message_list">messagelist</div>
<div id="message" class="new_message" style="height:auto;"></div>
<div style="background:#D2D2D2; height:97px; border-radius:4px;">
<div id="text_message">
<table width="" height="">
<tr>
<th width="auto" style="float:left;">
<a href=""><img src="" width="60" height="60" style="border-radius:5px;"/>
</a></th><th style="float:left;"><textarea name="sendmessage" style="width:579px; height:55px; border:orange 2px solid; border-radius:3px;" id="sendmessage" placeholder="send message to messager></textarea></th></th></tr></table>
<div style="float:right; padding-right:4px; margin-right:15px; margin-top:-3px;">
<input name="send" type="submit" value="send message" onClick="javascript:ajax_send();">
</div>
</div>
</div>
</div>

You could, using jQuery, calculate the bottom of the div and then scroll to it:
var $div = $("message_list");
var divpos = $div.offset();
var divheight = $div.height();
var divbottom = divpos.top + divheight;
var windowheight = $(window).height();
$(window).scrollTop(divbottom - windowheight);
The variables are used to calculate the bottom of the div, and then $(window).scrollTop() scrolls to the passed position. divbottom - windowheight makes the page scroll such that the bottom of the div matches the bottom of the screen.

Related

Divs are moving around when resizing/zooming-in/out page

If i set position:absolute it stops moving and messing around page, while zooming(in/out) the page. but the location of div are automatically changing, and all the divs are mixing together in one location. any ideas? hope my question was clear. none of the solutions I found worked for me. I have this website I am making, and the div elements move around when I zoom-in and zoom-out the webpage. Here is the HTML code And screenshot:Screenshot
<style>
/* KEYFRAMES */
/* IDS */
#changepos{
position:relative;
top:-250px;
}
#readmore{
position:relative;
top:-260px;
right:380px;
text-decoration-line:none;
border-radius:20px;
}
#movetext{
position:relative;
right:395px;
}
#wholepage{
width:500px;
margin-left:auto;
margin-right:auto;
}
#hello{
position:relative;
left:20px;
}
#hellos{
position:relative;
left:100px;
}
/* Body Visual */
input{
width:50%;
overflow:hidden;
}
main{
background-color:lightgray;
min-height: 100%;
min-width:100%;
background-size:1550px 800px;
background-repeat: no-repeat;
overflow-x:hidden;
}
body{
background-image:url('https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&w=1000&q=80');
min-height: 100%;
min-width:100%;
background-size:1550px 800px;
background-repeat: no-repeat;
overflow-wrap:hidden;
overflow-x:hidden;
}
/* Classes */
.typewriter {
font-family: Courier, monospace;
display: inline-block;
}
.typewriter-text {
display: inline-block;
overflow: hidden;
letter-spacing: 2px;
animation: typing 5s steps(30, end), blink .75s step-end infinite;
white-space: nowrap;
font-size: 30px;
font-weight: 700;
border-right: 4px solid orange;
box-sizing: border-box;
}
#keyframes typing {
from {
width: 0%
}
to {
width: 100%
}
}
#keyframes blink {
from, to {
border-color: transparent
}
50% {
border-color: orange;
}
}
}
.forms{
position:relative;
left:50px;
}
.lineh{
border-bottom: 4px solid lightgray;
width:1400px;
height:3px;
cursor:default;
position:relative;
border-radius:100px;
top:-11px;
}
.lines{
border-bottom: 2px solid none;
width:1000px;
height:3px;
background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg');
cursor:default;
position:relative;
border-radius:100px;
top:-195px;
right:400px;
}
.line{
 border-bottom: 2px solid pink;
width:1000px;
height:3px;
background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg');
cursor:default;
position:relative;
border-radius:100px;
}
.movepic{
position:relative;
left:270px;
top: -200px;
right:0px;
bottom:0px;
cursor:default;
opacity:1;
transition:1s;
}
.movepic:hover{
transform:translateX(20px);
}
.joint{
font-family:monospace;
font-size:10px;
text-decoration-line:none;
text-decoration-color:none;
text-decoration:none;
color:white;
}
.transp{
position:relative;
border-style:solid;
border-radius:50px;
background-color:none;
opacity:0.6;
cursor:pointer;
border:none;
overflow:hidden;
transition:1s;
border-image-width: 5px;
}
.transp:hover{
transform:translate(30px);
opacity:1;
transform-style: preserve-3d;
}
.container{
text-align: center;
margin-top: 360px;
}
.btn{
border: 1px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family:monospace;
cursor: pointer;
margin: 10px;
transition: 0.8s;
position: relative;
overflow: hidden;
}
.btn1,.btn2{
color: #3498db;
}
.btn3,.btn4{
color: #fff;
}
.btn1:hover,.btn2:hover{
color: #fff;
}
.btn3:hover,.btn4:hover{
color: #3498db;
}
.btn::before{
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background: #3498db;
z-index: -1;
transition: 0.8s;
}
.btn1::before,.btn3::before{
top: 0;
border-radius: 0 0 50% 50%;
}
.btn2::before,.btn4::before{
bottom: 0;
border-radius: 50% 50% 0 0;
}
.btn3::before,.btn4::before{
height: 180%;
}
.btn1:hover::before,.btn2:hover::before{
height: 180%;
}
.btn3:hover::before,.btn4:hover::before{
height: 0%;
}
</style>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roma's Portfolio</title>
<link rel="stylesheet" href="../sait/css/main.css">
<link rel="icon" type="image/png" href="https://bluemountmedia.com/wp-content/uploads/2020/07/BMM-favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="refresh" content="350">
<style>
.putebi{
width: 100%;
border-radius:4px;
padding:12px;
border:1px solid #d9a7c9;
box-sizing: border-box;
margin-top:6px;
margin-bottom:16px;
resize:vertical;
}
.med{
position:relative;
outline:none;
border-style:none;
opacity:0.6;
}
.med:hover{
opacity:1;
}
.soc{
animation:socebi 3s;
outline:none;
border-style:none;
}
#keyframes socebi{
from{
opacity:0;
transform:translateX(-600px);
}
to{
opacity:1;
transform:translateX(0px);
}
}
.kont{
animation: animacia 3s;
}
#keyframes animacia{
from{
opacity:0;
transform:translateX(600px);
}
to{
opacity:1;
transform:translateX(0px);
}
}
</style>
</head>
<body>
<div>
<div style="overflow-x:hidden;"id="hello" class="transp"> <h1> Roma's Portfolio</h1> </div>
</div>
<div class="lineh"></div>
<div class="wholepage">
<div style="text-align:center; text-decoration:none">
<a style="text-decoration-line:none" class="btn btn1 container" href="index.html">Main Page</a>
<a style="text-decoration-line:none" class="btn btn1 container">Contact</a>
<a style="text-decoration-line:none" class="btn btn1 container">Projects</a>
<a style="text-decoration-line:none" class="btn btn1 container">Subscribe</a> <br> <br><br>
<div class="typewriter">
<q class="typewriter-text"style="color:pink;text-align:center; font-size:xx-large; font-family:monospace;">I'm looking to expand my portfolio while I'm on top and while I'm young.</q>
</div><br><br>
<div style="cursor:default;"class="soc">
<a style="position:relative; left:640px; outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.facebook.com/profile.php?id=100041975361380"><img class="med" width="50px" src="../sait/images/facebook-logo.png"> </a> <br>
<a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.instagram.com/spoiledblueberry/"><img class="med" width="50px" src="../sait/images/instagram.png"></a><br>
<a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://github.com/Flowder2333"><img class="med" width="50px" src="../sait/images/github.png"></a><br>
</div>
<br><br><br>
</div>
</div>
</div>
<div id="wholepage">
<div id="movetext" style="color:white; font-family:monospace; font-size:large">
<h2 style="color:#64e873;text-shadow:2px 2px" class="line kont"> Hello!</h2> <br>
<h3 class="kont" style="text-align:left; font-size:large;"> I'm Roma. A Freelance Front End Developer based in Georgia. I specialise in creating interactive experiences and functional interfaces.I have worked on a multitude of web and print-baseds projects for a range of clients providing Web Design (Illustrator,Photoshop,Kdenlive) and Development(HTML,CSS,MYSQL,Wordpress).</h3>
</div>
<div class="kont movepic"> <img style="border:4px solid lightgray;max-width:100%;border-radius:50%" width="250" height="250" src="../sait/images/face.jpg" alt="პროფილის ფოტო"></div>
<div class="changepos lines kont">
</div>
<button id="readmore" class="btn btn3 kont">Read More</button><br><br>
</div>
<div style="position:relative; top:-180px">
<form action=""style="text-align:center">
<h1 style="color:#637478; font-family:monospace; font-size:xx-large;"> Contact Me</h1>
<div class="typewriter">
<h1 class="typewriter-text" style="font-family:monospace;color:#5fbced; font-size:xx-large">Swing by for a cup of coffee, or leave me a message:</h1>
</div><br>
<label style="font-family:;"for="saxeli">Enter Username</label>
<input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="saxeli" type="text" name="saxeli"><br><br>
<label id="email">Enter Email </label>
<input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="email" type="email" name="email"><br><br>
<label for="free">Enter Text </label>
<textarea style="background-color:#a2ebbf;opacity:0.6;text-align:top;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="free" name="free" rows="2" cols="20"></textarea><br>
<button style="border-radius:20px"type="submit" value="submit" class="btn btn4"> დასტურ ბლიად</button>
</form>
<img style="border:3px none pink; border-radius:50%;position:relative;top:-350px;overflow:hidden;" width="350px" height="350px"src="https://img1.pnghut.com/0/14/16/VHPJfnmcLd/internet-content-management-system-technology-search-engine-optimization-web-design.jpg">
</div>
</div>
<footer>
<p style="color:black; ">All Rights Reserved</p> -->
</footer>
</body>
</html>
It seems like, there is a problem with the background image, please try background-size: cover, if this also won't work then please share some more code using any online editor
The website is not responsive, add Media Queries to make your website look nice (the way you want) on any device screen size.

how to pass the dynamic image url to other function

I am trying to pass the path of image to onclick event. I am taking the image from folder dynamically. Now,I have to pass the path of image. I have tried, but I am not getting expected results. Please give me any advice.
My code:
<div class="col-md-2">
<div class="img-responsive">
<img id="prod" src="<?php echo base_url('uploads/store/'.$data->img);?>" style="height:350px;width:200px;display:none;" alt="Fjords">
</div>
My HTML & JS
<style type="text/css">
.button
{
width: 150px;
padding: 10px;
background-color: #FF8C00;
box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
font-weight:bold;
text-decoration:none;
}
#cover{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:none;
}
#loginScreen
{
height:380px;
width:340px;
margin:0 auto;
position:relative;
z-index:10;
display:none;
background: url(//here i have to pass above mentioned path src of image) no-repeat;
border:5px solid #cccccc;
border-radius:10px;
}
#loginScreen:target, #loginScreen:target + #cover{
display:block;
opacity:2;
}
.cancel
{
display:block;
position:absolute;
top:3px;
right:2px;
background:rgb(245,245,245);
color:black;
height:30px;
width:35px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div align="center">
<br><br><br><br>
Click here to Log In
</div>
<div id="loginScreen">
×
</div>
<div id="cover" >
</div>
</body>
</html>

Beginner jQuery Themeroller Problems

I'm attempting to build a page using Themeroller widgets and I've run into some bugs and can't figure out why. The first one: my drag element keeps going behind my drop element instead of over it. Second one: My tabs aren't showing ups as tabs but rather an unordered list (This one isn't necessarily a bug, I'm just very new to jQuery UI and I'm having difficulty linking both custom themes and themes from a CDN, if anyone can explain what I'm doing wrong it'd be much appreciated). And the last one: I'm trying to use datepicker() (which of course doesn't have a theme right now) to have the user input their birthday. I would like them to press and go and receive a notification that just spits their birthday back at them, I can't seem to be able to do this with ($datepicker).value. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>ThemeRoller</title>
<link type="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dark-hive/jquery-ui.css ">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
body{
height:680px;
width:auto;
background: -webkit-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -moz-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -ms-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -o-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
color:ghostwhite;
}
#navbar{
height:30px;
width:auto;
border-bottom:2px solid ghostwhite;
top:45px;
left:0;
right:0;
position: absolute;
}
#draggable{
height:50px;
width:150px;
border:1px solid black;
top:40px;
left:550px;
background:#182E4C;
padding:5px;
box-shadow: 0px 0px 10px 5px ghostwhite;
overflow-y: auto;
overflow-x: hidden;
}
#draggable span{
display:table;
margin:0 auto;
margin-top:15px;
}
#droppable{
position: absolute;
top:225px;
left:490px;
width:300px;
height:150px;
border:1px solid black;
padding 5px;
background: #33526E;
box-shadow:0px 0px 50px 10px black;
}
#droppable span{
display: table;
margin: 0 auto;
margin-top: 60px;
}
#birthday{
position:absolute;
top:460px;
left:573px;
width:auto;
height:200px;
}
#birthday span{
display: table;
margin:0 auto;
margin-bottom:10px;
}
#tabs{
width:200px;
bottom:0px;
left:0px;
top:75px;
border-top:2px solid ghostwhite;
border-right:2px solid ghostwhite;
border-bottom:2px solid ghostwhite;
position: absolute;
}
#sortable span{
display:table;
margin:0 auto;
margin-top: 20px;
}
#sortable{
width:200px;
bottom:0px;
right:0px;
top:75px;
border-top:2px solid ghostwhite;
border-bottom: 2px solid ghostwhite;
border-left: 2px solid ghostwhite;
position: absolute;
}
ol {
margin:0 0 10px 0
}
li:not(:last-child) {
margin-bottom: 10px;
}
</style>
<script>
$(init);
function init(){
var divdrag=$('#draggable');
var divdrop=$('#droppable');
var divsort=$('#fruitlist');
var divtab=$('#tabs');
divdrag.draggable()
divdrop.droppable({
drop:function(){
divdrag.text("Dropped!");
},
out: function(){
divdrag.text("No! Please drop me!");
},
over: function(){
divdrag.text("Please drop me! Pls...");
}
})
divsort.sortable();
divtab.tabs();
$('#datepicker').datepicker();
}
function birthday(){
var birth=$('#datepicker').value;
alert('You were born on: '+birth);
}
</script>
</head>
<body>
<h1 style="text-align:center">Themeroller</h1>
<div id="navbar"></div>
<div id='draggable'><span>Drag me!</span></div>
<div id='droppable'><span>Drop here!</span></div>
<div id='birthday'>
<span>Enter your birthday!</span>
<input type='text' id='datepicker'>
<input type='button' id='btn1' value='Go!' onClick=birthday()/>
</div>
<div id='tabs'>
<ul>
<li>Home</li>
<li><a href='#tabs-2'>About</a></li>
<li><a href='#tabs-3'>Products</a></li>
</ul>
<div id='#tabs-1'>Welcome to my best jQuery page yet!</div>
<div id='#tabs-2'>Sometimes I go a little overboard with compsci</div>
<div id='#tabs-3'>I also make and sell word clocks built with Arduino microcontrollers!</div>
</div>
<div id='sortable'><span>Sort me!</span>
<span id="fruits">
<ol id="fruitlist">
<li>Apples</li>
<li>Bananas</li>
<li>Pineapples</li>
<li>Lemons</li>
<li>Kiwis</li>
<li>Strawberries</li>
<li>Oranges</li>
<li>Mango</li>
<li>Plums</li>
<li>Peaches</li>
<li>Apricots</li>
<li>Squash</li>
<li>Honeydew</li>
<li>Watermelons</li>
</ol>
</div>
</body>
Edit: Oops. Well I got my theme working. was using type="stylesheet" instead of rel="stylesheet"
Edit 2: I made a second page with nearly identical drag and drop code and the drag element goes over the drop element. So something else in my page must be causing it but I don't know what. Here's the drag/drop code in the new document.
$(function(){
var drag = $('#dragdiv');
var drop =$('#dropdiv');
drag.draggable();
drop.droppable({
drop: function(){
drag.text('Dropped!');},
out: function(){
drag.text('No! Please! Take me back!');},
over: function(){
drag.text('Please drop me! Pls...');
}
});
});
It is nearly identical. In fact, I copied and pasted this code into my original document and still get the drag element going behind the drop element in the original. Something tells me my CSS isn't playing nice with my code.
Did it. Wasn't able to figure out how to do the datepicker value though.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
div{
font:12px normal arial, helvetica;
}
body{
height:670px;
width:auto;
background: -webkit-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -moz-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -ms-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -o-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
color:ghostwhite;
}
#navbar{
height:30px;
width:auto;
border-bottom:2px solid ghostwhite;
top:45px;
left:0;
right:0;
position: absolute;
}
#dragdiv{
height:50px;
width:150px;
border:1px solid black;
top:100px;
left:565px;
background-color:#182E4C;
padding:5px;
box-shadow: 0px 0px 10px 5px ghostwhite;
position: absolute;
}
#dropdiv{
position: absolute;
top:225px;
left:490px;
width:300px;
height:150px;
border:1px solid black;
padding 5px;
background-color: #33526E;
box-shadow:0px 0px 50px 10px black;
}
#dragdiv span{
display:table;
margin:0 auto;
margin-top:15px;
}
#dropdiv span{
display: table;
margin: 0 auto;
margin-top: 60px;
}
#birthday{
position:absolute;
top:460px;
left:573px;
width:auto;
height:200px;
}
#birthday span{
display: table;
margin:0 auto;
margin-bottom:10px;
}
#tabs{
width:200px;
bottom:0px;
left:0px;
top:75px;
border-top:2px solid ghostwhite;
border-right:2px solid ghostwhite;
position: absolute;
background: #5D5D5D ;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: grey;;
color: #222;
}
.tab-content{
display: none;
background: grey;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
#sortable span{
display:table;
margin:0 auto;
margin-top: 20px;
margin-bottom: 10px;
}
#sortable{
width:200px;
left:1070px;
top:-5px;
height:620px;
border-top:2px solid ghostwhite;
border-left: 2px solid ghostwhite;
position: relative;
background:#5D5D5D ;
}
ol {
margin:0 0 10px 0;
cursor:pointer;
}
li:not(:last-child) {
margin-bottom: 10px;
}
#goback{
position: absolute;
top:550px;
left:620px;
}
</style>
<script>
$(function(){
var drag = $('#dragdiv');
var drop =$('#dropdiv');
drag.draggable();
drop.droppable({
drop: function(){
drag.text('Dropped!');},
out: function(){
drag.text('No! Please! Take me back!');},
over: function(){
drag.text('Please drop me! Pls...');
}
});
var divsort=$('#fruitlist');
divsort.sortable();
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
$('#datepicker').datepicker();
});
function goBack(){
window.location = "http://www.javascriptpractice.pcriot.com/practiceSet5.html"
}
</script>
</head>
<body>
<h1 style="text-align:center">Themeroller</h1>
<div id="navbar"></div>
<div id='dropdiv'><span>Drop Here!</span></div>
<div id='dragdiv'><span>Drag Me!</span></div>
<div id='birthday'>
<span>Enter your birthday!</span>
<input type='text' id='datepicker'>
<input type='button' id='btn1' value='Go!' onClick=birthday()/>
</div>
<div id='tabs'>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Home</li>
<li class="tab-link" data-tab="tab-2">About<li>
<li class="tab-link" data-tab="tab-3">Products</li>
<li class="tab-link" data-tab="tab-4">Tabs</li>
</ul>
<div id="tab-1" class="tab-content current">
Welcome to my best jQuery page yet!
</div>
<div id="tab-2" class="tab-content">
I really like compsci. Sometimes I go overboard.
</div>
<div id="tab-3" class="tab-content">
I also make and sell word clocks with Arduino microcontrollers!
</div>
<div id="tab-4" class="tab-content">
Tabs aren't as easy as they look.
</div>
</div>
<div id='sortable'><span>Sort me!</span>
<ol id="fruitlist">
<li>Apples</li>
<li>Bananas</li>
<li>Pineapples</li>
<li>Lemons</li>
<li>Kiwis</li>
<li>Strawberries</li>
<li>Oranges</li>
<li>Mango</li>
<li>Plums</li>
<li>Peaches</li>
<li>Apricots</li>
<li>Squash</li>
<li>Honeydew</li>
<li>Watermelons</li>
</ol>
</div>
<input id='goback' type="button" value="Go Back" onClick='goBack()'/>
</body>
</html>

How can i make these tabs Responsive

When I open the site on a mobile then last tab merge with others tabs, and last tab will have a linebreak.
But I am not expert in media Query in CSS3. How do I apply this code, if there is some other way then mine give your best solution regarding my issue.
I don't want to use Bootstrap because my website consists of custom designing in html and css.
document.getElementById('content_4').style.display = 'none';
function tabSwitch(new_tab, new_content) {
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById('content_4').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById('tab_4').className = '';
document.getElementById(new_tab).className = 'activy';
}
function tabSwitch_2(activy, number, tab_prefix, content_prefix) {
for (var i=1; i < number+1; i++) {
document.getElementById(content_prefix+i).style.display = 'none';
document.getElementById(tab_prefix+i).className = '';
}
document.getElementById(content_prefix+activy).style.display = 'block';
document.getElementById(tab_prefix+activy).className = 'activy';
}
#tabbed_box {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_box h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:23px;
color:#ffffff;
letter-spacing:-1px;
margin-bottom:10px;
}
.tabbed_box h4 small {
color:#e3e9ec;
font-weight:normal;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
ul.tabs {
margin:0px; padding:0px;
text-align: center;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#F7F7F7;
color:black;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:13px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #F4FBFF;
border-radius: 2px;
-webkit-box-shadow: 1px 1px 1px 2px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 1px 1px 2px 1px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 1px 1px 2px 1px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
ul.tabs li a:hover {
background-color:#3498DB;
color:#fff;
border-color:#3498DB;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
ul.tabs li a.activy {
background-color:#3498DB;
color:#fff;
border:1px solid #3498DB;
}
.content {
background-color:#fff;
padding:10px;
}
#content_2, #content_3 { display:none; }
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li:last-child {
border-bottom:none;
}
ul.tabs li a {
background-image:url(images/tab_off.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<br>
<ul class="tabs">
<li>Text</li>
<li>Email</li>
<li>Facebook</li>
<li>Social Media</li>
</ul>
<div id="content_1" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-0011.png"/ style="float:left; width:320px; height:250px; ">
<p style="float:left; text-align:center; font-style:italic; padding-top:80px; padding-left:30px; font-size:20px;"><b>"Nothing delivers<br/> your message <br/> like a text message."</b></p>
</div>
<div id="content_2" class="content greybg">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-002.png"/ style="float:left; margin-right:30px; width:250px; height:180px; margin-top:30px; margin-bottom:40px;">
<p style="float:left; text-align:center; font-style:italic;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;"><i>How effective is email?</i></p>
<p style="font-style:italic;font-weight:bold;">Spam filters and an overwhelmed inbox means only 1 out of 5 emails are opened. And, of those only 1 out of 7 generates a response. </p>
</p>
</div>
<div id="content_3" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-003.png"/ style="float:left; margin-right:30px; width:260px; height:220px; margin-bottom:30px;">
<p style="float:left; text-align:center; font-style:italic; padding-left:5px;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;" ><i>How about Facebook?</i></p>
<p style="margin-left:20px;font-style:italic;font-weight:bold;">Facebook lost its immediacy years ago. Organic reach has dropped to less than 2% which means you have to pay-to-play to reach more fans and at Facebook's pace.</p>
</p>
</div>
<div id="content_4" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-004.png"/ style="float:left; margin-right:70px;width:220px; height:180px; margin-top:30px; margin-bottom:40px;">
<p style="float:left; text-align:center; font-style:italic; padding-left:8px;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;" ><i>...and other Social Media?</i></p>
<p style="margin-left:20px;font-style:italic;font-weight:bold;">Twitter, Google+, Instagram, Pinterest, and every other Social Media site controls access to your fans, most offer a pay option. The best option - your own Text lists.</p>
</p>
</div>
</div>
</div>
Add display: inline-block; for ul.tabs li a this will help
See fiddle : http://jsfiddle.net/sachinkk/1b2m3rsq/

Facebook like popover setting menu jquery and css

I am preparing a menu facebook style. I encode is running smoothly. But when I click the drop-down menu remains open in other userposts.
I want to get a diverse menu of each post. not associated with each other. What do I need it to be?
This is demo jsfiddle
HTML CODE:
<div class="container">
<div class="pay_ayar">
<a class="account"></a>
<div class="bubble">
<ul class="root">
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="pay_ayar">
<a class="account"></a>
<div class="bubble">
<ul class="root">
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
<li>Link2</li>
</ul>
</div>
</div>
</div>
CSS code:
.container {
float:left;
width:500px;
height:90px;
border:1px solid #000;
margin-top:30px;
}
.pay_ayar {
float:right;
width:20px;
height:25px;
border:1px solid #000;
display:none;
}
.container:hover .pay_ayar{
display:block;
}
a.account{
position:absolute;
line-height:25px;
width:20px;
height:25px;
cursor:pointer;
display:block;
}
.bubble{
float:left;
position:relative;
width:250px;
height:200px;
padding:0px;
border:1px solid #000;
margin-top:0px;
display:none;
margin-left:-230px;
top:25px;
}
.pay_ayar.open .account {
cursor: pointer;
width: 20px;
height:25px;
display: inline-block;
border: 1px solid #AAA;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-weight: bold;
color: #717780;
line-height: 16px;
text-decoration: none !important;
background: white url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% 0px;
}
.pay_ayar.open .account {
border: 1px solid #3B5998;
color: white;
background: #6D84B4 url("http://ttb.li/dump/buttons/dropdown_arrow.png") no-repeat 100% -26px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
border-bottom-color: #6D84B4;
}
and Javascript code:
$(document).ready(function()
{
$(".account").click(function()
{
if($(".bubble").css('display')=='none')
{
$(".pay_ayar").addClass('open');
$(".bubble").css('display','block');
}
else
{
$(".bubble").css('display','none');
$(".pay_ayar").removeClass('open');
}
});
$(document).click(function(e)
{
if($(e.target).attr('class')!='account')
{
if($(".bubble").css('display')=='block')
{
if($('.pay_ayar').hasClass('open'))
{
$('.pay_ayar').removeClass('open');
}
$(".bubble").css('display','none');
}
}
});
});
You have to get the current user target. You can get this with the user click event:
http://jsfiddle.net/pu7NQ/13/
$(".account").click(function(event)
{
var $container = $(event.target).closest(".container");
if($(".bubble", $container).css('display')=='none')
{
$(".pay_ayar", $container).addClass('open');
$(".bubble", $container).css('display','block');
}
else
{
$(".bubble", $container).css('display','none');
$(".pay_ayar", $container).removeClass('open');
}
});
This sure could be more elegant, but you get the idea.
If you want to close one element, on click outside, you will have to add a event listener to the document and listen, if the event was outside of the desired element. There is a plugin for that: http://benalman.com/projects/jquery-outside-events-plugin/
// add close listener
$container.on("clickoutside.outside",function(){
$(".pay_ayar").removeClass("open");
$(".bubble").hide();
$(this).off("clickoutside.outside");
});
Demo: http://jsfiddle.net/pu7NQ/16/
You should really consider, adding a close/open function to get rid of the code duplication.

Categories

Resources