I'm trying to add google custom search engine to my browser extension. Not sure how to add it to my chrome extention code
manifest.json
{
"manifest_version": 2,
"name": "Scoop",
"description": "Info Locator",
"version": "1.0.0",
"icons": {"128": "icon_128.png"},
"content_scripts": [{
"run_at": "document_end",
"matches": [
"https://*/*",
"https://*/*"
],
"js": ["jquery-1.11.3.js", "content-script.js" ],
"css": ["custom.css"]
}],
"browser_action": {
// "default_icon": "icon.png"
},
"background": {
"scripts":["background.js"]
},
"web_accessible_resources": ["popup.html"],
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
]
}
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SideNotes</title>
<link rel="stylesheet" href="css/style.css">
<script src="popup.js"></script>
<style>
body {
color: #333;
}
#title {
font-size: 42px;
color: #333;
font-weight: 300;
}
</style>
</head>
<body>
<div class="container" style="padding: 20px">
<div id="toolbar">
<h1 id="title">S C O O P</h1>
<img id="logo" src="image/icon.png" alt="">
</div>
<div id="all-notes">
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div id="take-note">
<form id="new-todo-form" method="POST" action="#">
<div class="gcse-search"></div>
</form>
</div>
<ul id="todo-items">
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/db.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
content-scripts.js
chrome.runtime.onMessage.addListener(function(msg, sender){
if(msg == "toggle"){
toggle();
}
})
var iframe = document.createElement('iframe');
iframe.style.background = "#e7f1f8";
iframe.style.height = "100%";
iframe.style.width = "0px";
iframe.style.position = "fixed";
iframe.style.top = "0px";
iframe.style.right = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.frameBorder = "none";
iframe.src = chrome.extension.getURL("popup.html");
document.body.appendChild(iframe);
function toggle(){
if(iframe.style.width == "0px"){
iframe.style.width="400px";
}
else{
iframe.style.width="0px";
}
}
background.js
chrome.browserAction.onClicked.addListener(function(tab){
chrome.tabs.sendMessage(tab.id,"toggle");
});
Related
When I decrease the height of the browser and the footer goes out of its area, the scroll does not appear but remains at the height of 20px all the way at the bottom? I found out this is becouse i have height:calc(100%-60px); but when it is set to the 100% the browser adds a scrollbar event even if it is not needed.Here is the code of the footer.
<footer>
<div>
Website crafted and designed by
</div>
</footer>
<style>
footer {
position: relative;
bottom:20px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
div {
padding: 0 var(--margin);
font-size: var(--font-size-base);
color: var(--color-gray);
}
div a {
color: #fff;
font-weight: 600;
</style>
and there is the example site when proble occours
---
import Layout from "../layouts/Layout.astro";
---
<Layout title="About ">
<main>
<h1>A lit bit about me</h1>
<p>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</p>
</main>
</Layout>
<style>
main {
padding: max(140px, 5%) var(--margin) 0 var(--margin);
height: 100%;
}
main h1 {
font-weight: 600;
font-size: var(--font-size-xxl);
}
main p {
padding-top: var(--margin);
font-size: var(--font-size-base);
}
</style>
And the layout conponent:
---
import "../styles/index.css";
import "../components/Navbar.astro";
import Navbar from "../components/Navbar.astro";
import Footer from "../components/Footer.astro";
export interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<Navbar />
<slot />
<Footer />
</body>
</html>
<style is:global>
:root {
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2rem, 1.75vw + 1.35rem, 2.75rem);
--font-size-xxl: clamp(2.4rem, 2.25vw + 1.6rem, 5rem);
--color-text: #f3f3f3;
--color-dark: #111111;
--color-bg-logo: #b86202;
--color-gray: #d9d9d9;
--margin: clamp(25px, 7vw, 125px);
--margin-spacing: clamp(5px, 1vw + 0.5rem, 15px);
}
html,
body {
color: var(--color-text);
font-family: "Lato", sans-serif;
height: 100%;
width: 100%;
}
body {
background: url("/background.webp") center / cover no-repeat fixed;
}
</style>
so I am developing a site so in a section element with some text and images the images are breaking down into some ugly designs so I want it to be in I particular design this is the code if you run it a resize it and then see the images it comes to some random design
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>]
<style>
#section2img1 {
width: 100px;
}
#section2img2 {
width: 100px;
padding-left: 129px;
}
#section2img3 {
width: 100px;
padding-left: 129px;
}
#section2img4 {
width: 100px;
padding-left: 129px;
}
#section2img5 {
width: 100px;
padding-left: 129px;
}
#section2img6 {
width: 100px;
padding-left: 129px;
}
</style>
</head>
<body>
<div id="section2">
<h3 id="text1section2">Lorem, ipsum.Lorem ipsum dolor sit.</h3>
<p id="text2section2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum</p>
<img src="/img/SECTION2/WEB_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img1">
<img src="/img/SECTION2/MOBILE_APP_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img2">
<img src="/img/SECTION2/COUSTOMER_PRODUCT_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img3">
<img src="/img/SECTION2/SEO___SMO-removebg-preview.png" alt="error" id="section2img4">
<img src="/img/SECTION2/WEB_DESIGN-removebg-preview.png" alt="error" id="section2img5">
<img src="/img/SECTION2/E-COMMERCE_SOLUTIONS-removebg-preview.png" alt="error" id="section2img6">
</div>
</body>
</html>
the link of the images
https://drive.google.com/drive/folders/1wQHGuoKuFk0fa-9upqiqmAk62ClOVAUS?usp=sharing
please help me
You can use Bootstrap to make your layout responsive. It has a 12 column system and you have 6 images so each image takes up two columns. You can also give it some padding with the "p" class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>]
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
#section2img1 {
width: 100px;
}
#section2img2 {
width: 100px;
}
#section2img3 {
width: 100px;
}
#section2img4 {
width: 100px;
}
#section2img5 {
width: 100px;
}
#section2img6 {
width: 100px;
}
</style>
</head>
<body>
<div id="section2">
<h3 id="text1section2">Lorem, ipsum.Lorem ipsum dolor sit.</h3>
<p id="text2section2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum</p>
<div class="row">
<div class="col-md-2 p-2">
<img src="img/SECTION2/WEB_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img1">
</div>
<div class="col-md-2 p-2">
<img src="img/SECTION2/MOBILE_APP_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img2">
</div>
<div class="col-md-2 p-2">
<img src="img/SECTION2/COUSTOMER_PRODUCT_DEVELOPMENT-removebg-preview.png" alt="error" id="section2img3">
</div>
<div class="col-md-2 p-2">
<img src="img/SECTION2/SEO___SMO-removebg-preview.png" alt="error" id="section2img4">
</div>
<div class="col-md-2 p-2">
<img src="img/SECTION2/WEB_DESIGN-removebg-preview.png" alt="error" id="section2img5">
</div>
<div class="col-md-2 p-2">
<img src="img/SECTION2/E-COMMERCE_SOLUTIONS-removebg-preview.png" alt="error" id="section2img6">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
$('.title').click(function(){
$(this).addClass('titleact');
});
.title{
background:#eee;
cursor:pointer;
}
.titleact{
background:lightseagreen;
color:white;
}
.title input{
background:none;
border:none;
outline:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>
<span>abc</span>
<input type='text' value='lorem'>
</div>
How to get text color white on input by clicking on title using css only?
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
Change
"color:white;"
to
"color:white !important"
Or the better way would be to add
".titleact input{ color: white;}"
to your css.
TRY:
<script type="text/javascript">
$('.title').click(function(){
$(this).addClass('titleact');
$(this).find("*").css("color","#fff");
});
</script>
or
<script type="text/javascript">
$('.title').click(function(){
$(this).addClass("titleact");
$(this).find("*").addClass("titleact");
});
</script>
I am trying to create two navigation bars with a Title and an image in between. This is what i currently have:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
float: right;
}
.site-info {
float: right;
}
.site-avatar {
float: right;
height: 120px;
margin-left: 15px;
}
</style>
</head>
<body>
<header>
<div class="topbar">
<nav class="site-nav">LOREM IPSUM | LOREM IPSUM | LOREM IPSUM | LOREM IPSUM </nav>
<img class="site-avatar" src="http://i.stack.imgur.com/xkF9Q.jpg">
<div class="site-info">
<h1>Title</h1>
<p class="site-description">Subtitle</p>
</div>
<nav class="content-nav">LOREM IPSUM | LOREM IPSUM | LOREM IPSUM | LOREM IPSUM </nav>
</div>
</header>
</body>
</html>
I would like to keep the text, navigation bars and the image floating to the right.
Image of what I am trying to achieve:
I have a web application based on MVC 4 framework with Bootstrap(twitter) and i want to make one of my pages a one page navigation with a scrollspy:
I have a fixed navbar at the top throughout my site and in one page of the site i want i addition a side bar ("nav nav-pills nav-stacked pull-left") with a scrollspy.
col-md-3 = on the left that will be storing my sidebar
col-md-9 = on the right that will be storing my context
I try different things and nothing seem to work, one thing that i notice is
that i need to add to the body tag:
<body data-spy="scroll" data-target="#side-nav">
but in MVC the body tag is on the "_layout" and i don't want to touch this shared partial view.
What can i do ? maybe someone has implement this feature in MVC and could give me a small example of it ?
This is my code :
#{
ViewBag.Title = "Designer";
}
<div class="row">
<div class="col-md-3">
#* Index *#
<div class="nav-pills pull-left affix navspy">
<div id="side-nav">
<ul class="nav">
<li>General</li>
<li>Words</li>
<li>File Type</li>
<li>Routes</li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<div id="general">
#* Section Gereral *#
<h2 class="page-header">Gereral</h2>
<p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
</div>
<div class="active" id="words">
#* Section Words *#
<h2 class="page-header">Words</h2>
<p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
</div>
<div id="filetype">
#* Section File Type *#
<h2 class="page-header">File Type</h2>
<p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
</div>
<div id="routes">
#* Section Routes *#
<h2 class="page-header">Routes</h2>
<p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('body').attr("data-spy", "scroll");
$('body').attr("data-target", "#side-nav");
});
</script>
What i'm missing here ?
You can use javascript to add attributes dynamically to the <body> tag.
Add this script just to the page where the scrollspy is. When it is loaded inside the _Layout, the attributes will be added to the <body> tag.
yourPage.cshtml
#{
ViewBag.Title = "Designer";
}
#section scripts
{
<script>
$(document).ready(function(){
$( 'body' ).attr("data-spy","scroll");
$( 'body' ).attr("data-target","#side-nav");
});
</script>
}
[...]
Shared \ _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
[...]
#RenderBody()
[...]
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", false)
</body>
</html>