this is my code , i put the link below :
LINK
this output for this source below :
i have link but it's not function when on click , i put that in div notification you can check full of source below , maybe the problem is in the css configure , but i cant figure out of my problem , can you fix it ?
<html>
<head>
<title>Create a Facebook like Notifications Window using jQuery and CSS</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
ul {
display:block;
/*background:#45619D;*/
list-style:none;
margin:0;
margin-left:500px;
padding:12px 10px;
height:21px;
width : 45px;
}
ul li {
float:left;
font:13px helvetica;
font-weight:bold;
margin:3px 0;
}
#noti_Container {
position:relative;
}
/* A CIRCLE LIKE BUTTON IN THE TOP MENU. */
#noti_Button { /*pengaturan lingkaran*/
width:22px;
height:22px;
line-height:22px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
background:red;
margin:-3px 10px 0 10px;
cursor:pointer;
}
#noti_buttons{
cursor:pointer;
}
/* THE POPULAR RED NOTIFICATIONS COUNTER. */
#noti_Counter { /*pengaturan hitung jumlah notif yang ada*/
display:block;
position:absolute;
background:#E1141E;
color:#FFF;
font-size:12px;
font-weight:normal;
padding:1px 3px;
margin:-8px 0 0 25px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
z-index:1;
}
/* THE NOTIFICAIONS WINDOW. THIS REMAINS HIDDEN WHEN THE PAGE LOADS. */
#notifications { /*pengaturan kotak notification*/
display:none;
width:400px;
position:absolute;
top:42px;
left:-350px;
background:#FFF;
border:solid 1px rgba(100, 100, 100, .20);
-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
z-index: 1;
}
/* AN ARROW LIKE STRUCTURE JUST OVER THE NOTIFICATIONS WINDOW */
#notifications:before { /*pengaturan warna arrow*/
content: '';
display:block;
width:0;
height:0;
color:transparent;
border:10px solid #CCC;
border-color:transparent transparent #e8e8e8;
margin-top:-20px;
margin-left:355px;
}
h3 {
display:block;
color:#333;
background:#FFF;
font-weight:bold;
font-size:13px;
padding:8px;
margin:0;
border-bottom:solid 1px rgba(100, 100, 100, .30);
}
.seeAll {
background:#F6F7F8;
padding:8px;
font-size:12px;
font-weight:bold;
border-top:solid 1px rgba(100, 100, 100, .30);
text-align:center;
}
.seeAll a {
color:#3b5998;
}
.seeAll a:hover {
background:#F6F7F8;
color:#3b5998;
text-decoration:underline;
}
</style>
</head>
<body style="margin:0;padding:0;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="noti_Container">
<div id="noti_Counter"></div> <!--SHOW NOTIFICATIONS COUNT.-->
<!--A CIRCLE LIKE BUTTON TO DISPLAY NOTIFICATION DROPDOWN.-->
<!--<div id="noti_Button"></div>-->
<img id="noti_Buttons" src="bell.png"></img>
<!--THE NOTIFICAIONS DROPDOWN BOX.-->
<div id="notifications">
LINK
<h3>Notifications</h3>
<?php
$user_name = "root";
$password = "";
$database = "wordpress";
$host_name = "localhost";
$koneksi = mysqli_connect($host_name, $user_name, $password , $database);
$result = mysqli_query($koneksi,"SELECT wp_comments.comment_content,wp_posts.post_name FROM wp_comments INNER JOIN
wp_posts ON wp_comments.comment_post_id = wp_posts.id AND wp_comments.user_id = 3 AND wp_comments.comment_approved = 1");
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){ ?>
<div style="padding:20px 0px 20px 0px;border-bottom:solid 1px #e8e8e8">
<div style="padding-left:10px;">
<?php
echo "your comment has been approved </br>".$row['comment_content'];?><a style="position:absolute;z-index:1" href="www.google.com" target="_top">see more link</a></br>
</div>
</div>
<?php } ?>
<div class="seeAll">See All</div>
</div>
</li>
</ul>
</body>
<script>
$(document).ready(function () {
// ANIMATEDLY DISPLAY THE NOTIFICATION COUNTER.
$('#noti_Counter')
.css({ opacity: 0 })
.text('7') // ADD DYNAMIC VALUE (YOU CAN EXTRACT DATA FROM DATABASE OR XML).
.css({ top: '-10px' })
.animate({ top: '-2px', opacity: 1 }, 500);
$('#noti_Buttons').click(function () {
// TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
$('#notifications').fadeToggle('fast', 'linear', function () {
if ($('#notifications').is(':hidden')) {
}
// CHANGE BACKGROUND COLOR OF THE BUTTON.
else $('#noti_Buttons').css('filter', 'opacity(70%)');
});
$('#noti_Counter').fadeOut('slow'); // HIDE THE COUNTER.
return false;
});
// HIDE NOTIFICATIONS WHEN CLICKED ANYWHERE ON THE PAGE.
$(document).click(function () {
$('#notifications').hide();
// CHECK IF NOTIFICATION COUNTER IS HIDDEN.
if ($('#noti_Counter').is(':hidden')) {
// CHANGE BACKGROUND COLOR OF THE BUTTON.
$('#noti_Buttons').css('filter', 'opacity(100%)');
}
});
$('#notifications').click(function () {
return false; // DO NOTHING WHEN CONTAINER IS CLICKED.
});
$("img").hover(function(){
$(this).css("filter", "opacity(30%)");
}, function(){
$(this).css("filter", "opacity(100%)");
});
});
</script>
</html>
Try to add HTTPS or HTTP in the href attribute.
LINK
Try this in the div, "notifications".
Thank you
Related
I want to display the notifications using manifest 3, Is there a workaround thats possible than waiting for chrome 91?
As a fix I used data URI, but that doesnt work
chrome.notifications.create(
"1", {
iconUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAh2SURBVHic7d1fcFxlGcfx73M2aUrTUu0ALRKqFzgMelHpwDhqwVRikt3sbpIKjP/orQqOIyMjjNYhqKM4neFGHB2ndkoHodKhTdPuJtgyjaIjlaYUUMFROmALTYHS1NTapLvn8aJpTUua5pycPWeb9/ncZTPP+z497y+727PvOQvGGGOMMcYYt8h0B9DtzKdEDuF6lLlRNGUu6D8Ie6mjR5YzNJ2BphUA7eOrwI+A909nHBPaUWCVtPJw2AFCB0Cf4gcoq8LWmwgJq6WFb4crDUH7aAJ+G7beVIDSJmmKQcu8UJMJq7DFry4e3wtTFngRdTvzKXMYSIWZ0FSM4rNQMrwdpCj4M0CZBmzxq5GQYnHQouABEGYHrjHx8LkkaEm49wBmxrAAOM4C4DgLgOMsAI6zADjOAuA4C4DjLACOswA4zgLgOAuA4ywAjrMAOM4C4DgLgOMsAI6zADiuJnDFSfYxi2WUeJ1LGGIUBepJMZdRribFtSjXAp8Abgw1hxnvBPBnhD+ivIzPPyizH+G4ZDmiu6lliAWUaaCOV4MOXtGt3bqFecymEeULCB1o8D1rjhoGNqM8xmx+J8s5UamJYtvbr0UuxWMlcA/wwbjmvci8ivIQJdZJjuNxTBj7xR26m1oOcwfKD4Er456/Sr2J8B2O8qjcTjnOiRO7uke3Mx+f76PchbvXGfgoDzGbB2Q5x5JoIPHLu/QpbgYeQ7kq6V5ith9lpaTpT7KJxAMAoEUuR9iA8Jmke4nJ74FOaeXdpBupivMAkuFthkkDv0m6l4pTfo1PczUsPlRJAADkdkZ5li+i/DLpXipGeYRdrJQMI0m3clpVvASMp0+QYh4bEG5NupdIKRsY5stxv8u/kKoLAIAWqcNjO3BT0r1EZBd1NFbyhE5YVRkAAN3KVdTyPHB50r1M0yAnuUFyvJF0IxMJFYCuri5vz549i0ql1FyAmprysaVLlw52dXX5UTanfbQCxbB9VgWlXdL0RDlkV1eXt3v37it9v7Yepnf8p3xgs9nOJVDuBG4C+ajq2fcJEOEE6F+BZyC1edu2zS8EbWYi2sd64I4oxoqd8Ki0RNN7Op2/3vOkQ0SXnf/48xfQPwQ5/hcMQC7XmVUt36MqHwvSsIjuVWV1odBTCFJ3Lt3BQkq8zMV3K7pj1HCNNHFoOoO0teXzwLdAlgSpE+F5YPW2bVsmvXHUeQOQTq9oSKXKP1VleZCJJ2hk56xZqTs3bdp0MOwY2se9wIPT6SN2Qpe08EDY8lwut1jVe1iVm6fVhrDT92d9rVjcODjh7yd6sK0tvxxkLRH91YnooKr3pUKheyBMvW5hHnW8BiyIop8YDDHCYmlnOExxW1t7E7AGeF8UzUx2/N9zIiiX68xy6oxcZE+5qrJIRAu5XEc6TP3YgfxZVP3EYG3Yxc/lOjpEeJyIFh8mP/5nPQPkcp3LVP0nVamLavJzHE+ltLWnp+fFoIXay4cQ9lH9/yPwqeHD0sS+oIW5XO7Tvi8bQWZVojHguCotxeKWl04/cOYZoLm58wrf939VwcUHmOP7PNbc3HlF0EJJ8xrwTPQtRe7ZMIufydy2SNVbU8HFB5jjefp4Op0+c27lTABqa/2fAAsrODkAqtJQW+vfH7L8iUibqQSlO0yZyMhq1cqf9FKVBs+r/fHpnz2ATKb940BnpScf5/Pt7e0fCVwlPF2BXqJVw7agJW1t7Z8EyVWinYnJrblc7kYYC4DncXd8kwOQKpU08J3GpYVXkOo8pTrmXZp4JXiZfDP6Vibn+3I3gDf2etwUdwNA64oVK4LvCfTZU4FeorJLBA1SkMnctgj0lko1dD4i0pzP5xd6NTWaUU1i7754o6Pl1sBlXpi/sNj8LWhBKjWaJYE9karU+L60eJ6nn4p78v83ocsCF/n8vQKtRGV/0ALfJ7HjDyzzVAn+Ziwycl3gEo+3KtBINJR/hagKfgwio9d5kOhu3KsDV/jhzrDFQgnxeYc2RN/IFGdWafBEqE+qAdB6gp7Z86o4AMEJMCexyYW5HvDfpBoA8RobG4O9AVJKFWomdqf+7ZLgxlw97oEG+ooRM3OoylseTG/DgrmY6SEP2JV0GyYp8ifP99mZdBsmMTs91ZO7RIJ91ZiZEQ4NDh54zuvt7R0BnbmXY5nzkJ8PDAyc9ABUy2tAE7k+3cRPRI/6/shaGPs4uFAoHAG+m2hXJjaq3Nvb2/tvGHcHr0Kh55Fstv0WVfLJtTYFNRygzFeSbmNCqeBbweKnxUKhZ8Ppn876GLhcHv26581qAJbG3tcUSROHYQZfQl5R+kJtrXfn+EfOOg156mmh9DkRfQkzo4jo3pGRunx3d/fQ+Mffcx66UCgcueyyBZ8FfhFbd6bSNohoZseOjUfP/cWEO4HWrVt3Argvk+l4TkS7CPOxrUmciL4u4t2/dWv3eXcqT/pJVLHY/eTg4IGlInzDXhYuDmN7El8U0bsOHnzjhskWH6ZwH9+BgYGTMLAeWJ/P5z9QKslKEe6LqmETHVUeTKV0fU9Pz5tTrQn0WfSpgaUveGsmHtIXZPGhiu4SZpJhAXCcBcBxFgDHWQAcl/jXudTXX/p0NpsPdD3dTKGa/M0uEg8AyBJ1cvmrg70EOM4C4DgLgOMsAI6zADjOAuA4C4DjLACOswA4zgLgOAuA4ywAjrMAOM4C4DgLgOMsAI6zADjOAuA4C4DjLACOswA4zgLgOAuA4ywAjrMAOM4C4DgLgOMsAI6zADjOAuC4xC8P9zz/mlQqNWO+CSyoUkn/mcxX956SeACGh4eH+vv7nQ1ANtue6Pz2EuA4C4DjLACOswA4LvCbQFXvHc8rrYuqgcbGRr+/vz+q4S46qqwX0Uj+EH0/9U4U4xhjjDHGGGNmsv8BludiHyoO7UAAAAAASUVORK5CYII=",
title: "This should be a notification",
type: "basic",
message: "Notification body",
isClickable: true,
priority: 2,
},
function () { }
);
You could create a tiny library that do some similar to chrome.notification.
I had done something similar for progress notifications which Firefox (did|do) not support.
I hope this code inspires you.
However, I suggest you wait for MV3 to be a little more "mature"
JS:
function myNotif(id, title, body, zIdx, evnt) {
let divL1 = document.createElement("div");
divL1.id = 'myNotif_' + id;
divL1.className = 'myNotifClass';
//X per chiudere
let divL2 = document.createElement("div");
divL2.className = 'myNotifClass_X';
divL2.innerHTML = '<SVG WIDTH="10" HEIGHT="10" viewBox="0 0 20 20"><path stroke-width="3" stroke="black" class="checkmark__check" fill="none" d="M0 0 20 20 M20 0 0 20" /></SVG>';
if (evnt) {
if (evnt._onClose)
divL2.addEventListener('click', function() { evnt._onClose(); document.body.removeChild(this.parentNode) })
else
divL2.addEventListener('click', function() { document.body.removeChild(this.parentNode) })
}
divL1.appendChild(divL2);
//TITOLO
divL2 = document.createElement("div");
divL2.className = 'myNotifClass_title';
divL2.textContent = title;
divL1.appendChild(divL2);
//img & body
divL2 = document.createElement("div");
divL2.className = 'myNotifClass_img_body';
//img
let divL3 = document.createElement("div");
divL3.className = 'myNotifClass_img';
divL2.appendChild(divL3);
//body
divL3 = document.createElement("div");
divL3.className = 'myNotifClass_body';
let divL4 = document.createElement("div");
divL4.className = 'myNotifClass_bodyUp';
let divL5 = document.createElement("div");
divL5.id = 'myNotif_' + id + '_bodyUp_CT';
divL5.className = 'myNotifClass_bodyUp_CT';
divL5.innerHTML = body;
divL4.appendChild(divL5);
divL3.appendChild(divL4);
divL4 = document.createElement("div");
divL4.className = 'myNotifClass_bodyDown';
divL5 = document.createElement("progress");
divL5.id = 'myNotif_' + id + '_Progress';
divL5.value = 0;
divL5.max = 100;
divL4.appendChild(divL5);
divL3.appendChild(divL4);
divL2.appendChild(divL3);
divL1.appendChild(divL2);
divL1.style.zIndex = zIdx;
if (evnt)
if (evnt._onClick)
divL2.addEventListener('click', function() { evnt._onClick() });
document.body.appendChild(divL1)
}
CSS:
progress {
margin:3px 4px;
width:230px;
height:6px;
border-radius:2px
}
progress::-moz-progress-bar {
background-color:#1e90ff;
border-radius:2px
}
.myNotifClass {
font-family:Verdana, Calibri;
position:fixed;
bottom:8px;
right:9px;
width:351px;
height:115px;
background-color:white;
border:1px solid gray;
box-shadow:1px 1px darkgray;
color:black;
}
.myNotifClass .myNotifClass_X {
position:relative;
float:right;
top:5px;
right:8px
}
.myNotifClass .myNotifClass_title {
font-size:12px;
font-weight:bold;
position:relative;
top:7px;
left:8px;
width:316px;
height:14px;
background-color:inherit;
border:0px;
padding:2px;
overflow:hidden
}
.myNotifClass .myNotifClass_img_body {
font-size:12px;
position:relative;
left:8px;
top:7px;
bottom:8px;
width:320px;
height:80px;
background-color:inherit;
border:0px;
padding:0px
}
.myNotifClass .myNotifClass_img_body .myNotifClass_img {
position:inherit;
float:left;
left:0px;
top:0px;
height:100%;
width:80px;
background-image:url('./wait.png');
background-position:center;
background-size:auto;
background-repeat:no-repeat;
background-color:inherit;
margin:0
}
.myNotifClass .myNotifClass_img_body .myNotifClass_body {
position:inherit;
float:right;
right:0px;
height:100%;
width:240px;
background-color:inherit;
margin:0
}
.myNotifClass .myNotifClass_img_body .myNotifClass_body .myNotifClass_bodyUp{
font-size:11px;
height:53px;
line-height:130%;
width: 236px; /*calc(100%-4px);*/
background-color:inherit;
padding:5px 2px 5px 2px;
overflow:hidden;
display:table
}
.myNotifClass .myNotifClass_img_body .myNotifClass_body .myNotifClass_bodyUp .myNotifClass_bodyUp_CT {
display:table-cell;
height:100%;
vertical-align:middle
}
.myNotifClass .myNotifClass_img_body .myNotifClass_body .myNotifClass_bodyDown{
height:17px;
width:100%;
background-color:inherit
}
HTML:
<HTML>
<HEAD>
<LINK TYPE="text/css" REL="stylesheet" HREF="./provaNotifDIV.css">
<SCRIPT SRC="./provaNotifDIV.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function startProgress() {
var timer = setInterval( function() {
let x = document.getElementById('myNotif_1_Progress');
if (x.value >= 100) {
clearTimeout(timer);
document.getElementById('myNotif_1_bodyUp_CT').textContent = "FATTO!"
}
else {
x.value += 1;
document.getElementById('num').textContent = x.value
}
}, 12)
}
document.addEventListener('DOMContentLoaded', function() {
myNotif(1, 'Trasferimento Indicatori in corso...', '<SPAN ID="num">0</SPAN> su <SPAN ID="denom">100</SPAN> caricati', 100, {'_onClick': function() { alert('click') }, '_onClose': function() {alert('close')} });
startProgress()
})
</SCRIPT>
</HEAD>
<BODY>
Ciao
</BODY>
</HTML>
I want to autoplay the video when it comes in the viewport and should stop playing the video when it goes out of the viewport with ionic 3, can anyone please suggest how to do that?
Yes you can do it.
$(window).scroll(function(){
var trackerOffset = $('.tracker').offset().top; // offset in document
var trackerPosition = trackerOffset - $(window).scrollTop(); // offset in viewport
$('.debug-status').html('video status: ' + checkTrackerPos(trackerPosition));
}).trigger('scroll');
function checkTrackerPos(trackerPosition){
var triggerTop = $('.trigger-top').position();
var triggerBottom = $('.trigger-bottom').position();
if (trackerPosition >= triggerTop.top && trackerPosition <= triggerBottom.top ) {
return 'playing!';
}
return 'paused';
}
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
text-align:center;
font-family:Arial,sans-serif;
}
.debug {
font-size:20px;
position:fixed;
left:50%;
top:50%;
width:30vw;
margin-left:-15vw;
margin-top:-35px;
padding:15px;
background:rgba(0,0,0,0.05);
}
.viewport {
position:relative;
width:100vw;
height:200vh;
border:2px dashed red;
display:flex;
justify-content:center;
flex-direction:column
}
/* Position these two as you please */
.trigger-top,
.trigger-bottom {
width:100%;
text-indent:-50%;
position:fixed;
top:25%;
border-top:1px dotted #000;
}
.trigger-bottom {
top:auto;
bottom:25%;
}
.video-wrapper {
position:relative;
color:blue;
border:1px solid blue;
width:400px;
height:300px;
margin:0 auto;
}
.video-wrapper .tracker {
position:absolute;
top:50%;
left:50%;
width:1px;
height:1px;
padding:1px; /* these 3 attributes are here just for the show */
border:1px solid red;
color:red;
line-height:1px;
text-indent:5px; /* again, just for the show */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="viewport">
<div class="debug">
<div class="debug-trigger"></div>
<div class="debug-pos"></div>
<div class="debug-status"></div>
</div>
<div class="trigger-top">top trigger</div>
<div class="trigger-bottom">bottom trigger</div>
<div class="video-wrapper">
video
<div class="tracker">tracker</div>
</div>
</div>
Refer this answer: https://stackoverflow.com/a/50479802/10971575
Could just call a JS -function when you scroll.
<div onscroll="myFunction()">
And the JS-function would roughly look like this:
if (end of viewport > document.body.scrollTop > start of viewpoint || end of viewport > document.documentElement.scrollTop > start of viewpoint) {
vid.play();
}else{vid.pause();}
Hey I am making a website and have recently seen some problems With css. My header div Works great maybe because I have styled it With Width 100%. But my main and side div seems to have some problems with the size. I have a Width of 1288px on my main id and when I checked it it is way less. I want my side div to be 30% of the Width of the page and the main div to be 70% of the page. How can I do this?
Here is my php code:
<?php
$tjener = "localhost";
$brukernavn = "root";
$passord = "";
$database = "searchengine";
$connection = mysqli_connect($tjener,$brukernavn,$passord,$database) or die("could not connect");
$connection->set_charset("utf8");
$output = "";
//collect
if(isset($_POST["q"])) {
$searchq = $_POST["q"];
$searchq = mysqli_real_escape_string($connection,$searchq);
$searchq = htmlspecialchars($searchq);
$query = mysqli_query($connection,"SELECT * FROM products WHERE vareNavn LIKE '%$searchq%' OR desci LIKE '%$searchq%'");
$count = mysqli_num_rows($query);
if($count == 0) {
$output = "There was no search results.";
} else {
while ($row = mysqli_fetch_array($query)) {
$id = $row['vareNr'];
$vareNavn = $row['vareNavn'];
$desci = $row['desci'];
$output .= "<h1>" . $vareNavn . "</h1><p> " . $desci . "</p><br/>";
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script>
function active(){
var Search = document.getElementById("search");
if(search.value == "Search..."){
search.value = "";
search.placeholder = "Search...";
}
}
function inactive(){
var Search = document.getElementById("search");
if(search.value == ""){
search.value = "Search...";
search.placeholder = "";
}
}
</script>
</head>
<body>
<div id="header">
<div id ="searchBar">
<form action="main.php" method= "post">
<input type="text" id="search" name="q" placeholder="" value="Search..." autocomplete="off" onMouseDown="active();" onBlur="inactive();"/><input type="submit" id="searchButton" value="Search"/>
</form>
</div>
</div>
<div id="main">
<div id="oppstart">
<h1>Newly commenced webstore</h1>
</div>
<div id="klokkeMer">
<h2>Watches</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<?php
print($output);
?>
</div>
<div id="side">
</div>
</body>
</html>
and here is my css code:
body {
font-family: arial;
}
h1 {
margin: 20px 0px 0px 0px;
padding:0;
}
p {
margin: 0;
padding:0;
}
#header {
width:100%; /* Full lengde*/
background-color:#1F2A40;
height:100px; /* 150px */
position:absolute;
top:0px;
left:0px;
}
#search {
border: 1px solid #1F2A40;
border-right:none;
font-size:16px;
padding:10px;
outline:none;
width:700px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomleft:10px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}
#searchButton {
border: 1px solid #1F2A40;
padding:10px;
font-size:16px;
background-color:#ff9933;
font-weight:bold;
color:#1F2A40;
cursor:pointer;
outline:none;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
#searchButton:hover {
background-color:#F5870A;
}
#main {
position:absolute;
top:100px;
background-color:red; // change to white when website is done
width:1288px;
height:800px;
left:300px;
}
#side {
position:absolute;
top:100px;
background-color:orange; // change to white when website is done
width:300px;
left:0px;
height:800px;
}
#searchBar {
position:absolute;
width:800px;
top:8px;
left:250px;
/* border:1px solid red; */
}
#div1 {
position:absolute;
width:100px;
top:200px;
left:300px;
border:1px solid black;
height:100px;
background-color:purple;
}
#div2 {
}
#div3 {
}
Try using percentages for your main and side widths instead of pixels
#side{
width: 30%;
}
#main{
width: 70%;
}
So what I would do is to scrap most of this css, and use Bootstrap
This way you get a clean and easy set of tools to use troughout your webpage.
You include the following in your header:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
After this, then you use this code:
<div id="side" class="col-md-3">
Sidebar
</div>
<div id="main" class="col-md-9 col-md-offset-3">
<div id="oppstart">
<h1>Newly commenced webstore</h1>
</div>
<div id="klokkeMer">
<h2>Watches</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<?php
print($output);
?>
</div>
See it in action here on jsfiddle
It might not have your exact dimentions, however this gives you a structered set of rules for your CSS you can use troughout your website
Does anyone have MapBox experience?
I'm trying to implement a personal map with specific markers, complete with pan and zoom features. I was trying to implement the code from the website that does just this that comes directly from the MapBox website. However, when I implemented in to my own page I got the following:
As you can see there is a weird paneling effect happening as well as white blocks around the markers. The map is pretty ineffective this way so I was hoping someone out there knew the solution.
Here's the code I used:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Pan and vertical zoom</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; height:500px}
</style>
</head>
<body>
<style>
.ui-control {
font:bold 12px/28px Helvetica, sans-serif;
text-align:center;
position:absolute;
top:10px;
left:10px;
z-index:1000;
}
.ui-pan {
position:absolute;
top:0;
left:0;
z-index:1000;
}
.ui-pan .panner {
background:#fff;
color:#404040;
font-size:9px;
position:absolute;
top:0;
left:0;
width:28px;
height:28px;
border:1px solid rgba(0,0,0,0.4);
border-radius:3px;
}
.ui-pan .panner:hover { background-color:#f8f8f8; color:#404040; }
.ui-pan .panner.up { left:28px; }
.ui-pan .panner.right { left:58px; top:28px; }
.ui-pan .panner.down { left:28px; top:58px; }
.ui-pan .panner.left { top:28px; }
.ui-zoombar {
background:#FFF;
position:relative;
top:93px;
left:28px;
width:28px;
height:200px;
border:1px solid rgba(0,0,0,0.4);
border-radius:3px;
cursor:pointer;
}
.ui-zoombar:hover { background-color:#f8f8f8; }
.ui-zoombar .handle {
position:absolute;
cursor:pointer;
width:26px;
height:28px;
background:#404040;
color:#fff;
border-radius:2px;
}
.ui-zoombar .handle:hover { background:#303030; }
</style>
<div class='ui-control'>
<div id='pan' class='ui-pan'>
<a href='#' id='up' class='panner up'>▲</a>
<a href='#' id='right' class='panner right'>▶</a>
<a href='#' id='down' class='panner down'>▼</a>
<a href='#' id='left' class='panner left'>◀</a>
</div>
<div id='zoom-bar' class='ui-zoombar dragdealer'>
<div id='handle' class='handle'>0</div>
</div>
</div>
<div id='map'> </div>
<!-- If you plan to use this example, download dragdealer from
https://code.google.com/p/dragdealer/ instead of hotlinking it like this -->
<script src='https://dragdealer.googlecode.com/svn/tags/0.9.5/dragdealer.js'></script>
<script>
var zooms = 19;
var handle = document.getElementById('handle');
var map = L.mapbox.map('map', 'tlchang.ikgi2358', {
zoomControl: false
})
.setView([42.0, -3.5], 2);
// Configure Dragdealer to update the map zoom
var zoom_bar = new Dragdealer('zoom-bar', {
steps: zooms,
snap: true,
horizontal: false,
vertical: true,
callback: function(x, y) {
var z = y * (zooms - 1);
map.setZoom(z);
handle.innerHTML = z;
}
});
// Round the zoom value the number looks presentable.
map.on('zoomend', function() {
var z = Math.round(map.getZoom());
zoom_bar.setValue(0, z / 19);
handle.innerHTML = z;
});
document.getElementById('left').onclick = function(e) { e.preventDefault(); map.panBy([-100, 0]); };
document.getElementById('right').onclick = function(e) { e.preventDefault(); map.panBy([100, 0]); };
document.getElementById('down').onclick = function(e) { e.preventDefault(); map.panBy([0, 100]); };
document.getElementById('up').onclick = function(e) { e.preventDefault(); map.panBy([0, -100]); };
</script>
</body>
</html>
Any ideas?!
This example works fine on its own.
However, when I implemented in to my own page I got the following:
This is probably the issue. If you can provide a link to your own page, then that would help - you probably have some over-eager CSS rules that are causing this problem.
I tried your script but it isn't working right. I have edited my code below to show exactly what I am working with. Thank you so much for being helpful.
Quazi
Hi,
I am very new to JQuery.
I am trying to get a div to fade in after a click event and then hide after click anywhere. I have three divs set up to do this with css set as display:none. The problem is that the script does not work in IE8 and only works in ff/safari if I double click or triple click the menubar links below.
I am using the following code to show/hide these divs on mouse click:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
body,
html {
margin:0;
padding:0;
color:black;
background:black;
color:black;
}
#logo {
margin-top:1%;
width:12%;
margin-left:5%;
padding:1%;
border:2px solid #FF8c00;
}
#showsbanner {
margin-top:1%;
width:60%;
position:absolute;
right:2px;
}
#wrap {
width:90%;
margin:0 auto;
background:black;
color:black;
}
#header {
padding:5px 10px;
background:black;
color:#ef9c00;
}
h1 {
color:#35002c;
font-family:"verdana";
font-size:25px;
}
h2 {
color:#044476;
font-family:"verdana";
font-size:18px;
}
h3 {
color:#044476;
font-family:"verdana";
font-size:15px;
}
#nav {
padding:5px 10px;
width:89%;
margin-left:5%;
background:#ff8c00;
border:2px solid darkblue;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
color:white;
}
#menubar {
float:left;
width:40%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#bcity {
float:right;
width:50%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#aicbk {
display:none;
float:right;
width:50%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#pdil{
display:none;
float:right;
width:50%;
padding:1%;
background:#ff8c00;
margin-bottom:1%;
border:2px solid darkblue;
}
#footer {
clear:both;
padding:1px, 1px;
background:#ff8c00;
width:100%;
border:2px solid darkblue;
}
#footer p {
color:white;
font-size:12px
}
* html #footer {
height:1px;
}
//The last four lines are an IE bug fix
</style>
<script type="text/javascript" src="homepage_files/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var gLastH = null;
var gLastId = null;
$('.toggleh').hide();
$('.toggle').click(function(e) {
$('.toggleh:visible').fadeOut('slow');
gLastId = $(this).attr('id');
console.log('#' + gLastId + 'h');
gLastH = $('#' + gLastId + 'h');
$(gLastH).fadeIn('slow');
e.stopPropagation();
});
$('*').click(function(e) {
if ($(this).attr('id') != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
});
</script>
stuff...
text here
text here2
text here3
stuff......
<div class="toggleh" id="toggle2h">
<div id="aicbk">
stuff....
</div>
</div>
<div class="toggleh" id="toggle3h">
<div id="pdil">
stuff..
</div>
</div>
<div id="footer">
stuff..
</div>
Here's a working sample, tested under Chrome 8.0.552.0 dev:
<html>
<head>
<title>S.O. 3920865</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var gLastH = null;
var gLastId = null;
$('.toggleh').hide();
$('.toggle').click(function(e) {
$('.toggleh:visible').fadeOut('slow');
gLastId = $(this).attr('id');
console.log('#' + gLastId + 'h');
gLastH = $('#' + gLastId + 'h');
$(gLastH).fadeIn('slow');
e.stopPropagation();
});
$('*').click(function(e) {
if ($(this).attr('id') != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
});
</script>
</head>
<body>
<div id="menubar">
<div class="toggle" id="toggle1">
text here
</div>
<div class="toggleh" id="toggle1h">
some description in here I suppose
</div>
<div class="toggle" id="toggle2">
text here2
</div>
<div class="toggleh" id="toggle2h">
some description in here I suppose 2
</div>
<div class="toggle" id="toggle3">
text here3
</div>
<div class="toggleh" id="toggle3h">
some description in here I suppose 3
</div>
</div>
</body>
</html>
Perhaps you need to check jQuery UI accordion which can be what you really want.
EDIT: following 1st comment.
Use this simple code to hide/show menu (or any div)
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
Click here to toggle visibility of element #foo
<div id="foo" style="display:block">This is foo</div>