How can you prevent an overlay in greybox?
I am using the following code:
<script type="text/javascript">
var GB_ROOT_DIR = "greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
In the css, you need to remove
#GB_overlay {
background-color: #000;
position: absolute;
margin: auto;
top: 0;
left: 0;
z-index: 100;
}
In order to remove the overlay
Related
I want to question for my problem about a Slider/Swipe, i want the slider can move automatically.
so, I have a page php with Slider/Swipe, but its not move automatically, how to make the slider automatic move.
please help for my problem, I really hope for your help, thank you all
this is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="tmp_home_swipe/css/swiper.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/font-awesome.min.css" /> -->
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 70%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container" id="slideshow">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="tmp_home_swipe/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
});
</script>
</body>
</html>
thanks for attention.
var swiper = new Swiper(".swiper-container", {
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});
https://themesbrand.com/velzon/docs/php/swiper-slider.html
I am trying to include an external css into my PHP file:
<head>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
my CSS File:
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
display: block;
margin-top:50px;
}
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
overflow-y:hidden;
}
.container-fluid {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAWklEQVQoU2P8P5PhPwMDAwNjOgMjiMYFGIlWiM2E1oMvwbZU24vDbUFYN/P/f4Z0RjAfv0J8DgT5AUM3ksnIejEV4jAZa5B8mhkH9gxf+iIsnkEyiWiF2GwHAGuiJAtmjT1hAAAAAElFTkSuQmCC);
repeat;
position: relative;
padding-bottom: 70px;
}
p{
}
.btn-success {
background-color: #85C1E9;
border:0;
}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.navbar {
padding-top: 0px;
padding-bottom: 0px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 15px;
letter-spacing: 4px;
}
col-sm-4:hover {
color:#85C1E9;
}
.navbar-nav li a:hover {
color: #85C1E9 !important;
}
.helper {
margin:auto;
padding-top: 50px;
}
.col-sm-4:hover {
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJklEQVQYV2OMq7zlw4ADMIIkF7WrbUGX/3+G4f+ASS4MVtuMzcEAiGEnwSwsT0sAAAAASUVORK5CYII=")
repeat;
}
The stylesheet is obviously used, but the plaintext is also seen in the PHP file. If tried adding type or leave it away, href as /css/base.css and without leading /, but somehow I won't get rid of the plain text in my file. Any Idea whats causing it?
The PHP File:
<html>
<head>
<title>Awesome Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/my.js"></script>
<script>
...
</script>
<header id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
...
</head>
</header>
<body>
..
</body>
EDIT:
Found the error, there was a sneaky include(css/base.css)
I tried to validate your css using the W3 Css validator and it told me there's a parse error in your css. Namely you're closing the background-image: with a semicolon while on the line below theres a repeat;. This is a syntax error, and I think because it can't parse the css, it's just displayed as plain text.
You should know if you want to give styles to php output commands, like echo or print you have to type all of your html codes .
And type your php codes middle of body tags in HTML format . Like this :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<?php
$text = "Hello World !";
echo "<p>" . $text . "</p>";
?>
</body>
</html>
But another problem that your code has is you typed a header tag inside head tags and close it after head closing tag and this will break the html programming grammar .
I am trying to make a image sticker html 5 app. In which user uploads a photo and then places stickers on top of it. I am able to do it through HTML 5 canvas and Jquery library free transform to rotate and scale stickers on top of image but when i convert this into jpeg the css transaction is lost and only image with stickers on top is generated. Code is written below. Is there any other way to do it?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://greenethumb.com/github/jquery-free-transform/css/jquery.freetrans.css"/>
<script type="text/javascript" src="http://greenethumb.com/github/jquery-free-transform/js/Matrix.js"></script>
<script type="text/javascript" src="http://greenethumb.com/github/jquery-free-transform/js/jquery.freetrans.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ui.core.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.ui.resizable.css" />
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1" />
<style>
#draggable-zone {
background: #000 url(images/space.jpg) 0 0 no-repeat;
border: 3px solid #000;
height: 500px;
margin: 2em auto;
overflow: hidden;
width: 600px;
}
.ui-wrapper {
overflow: visible !important;}
.ui-resizable-handle {
background: #f5dc58;
border: 1px solid #FFF;
z-index: 2;}
.ui-rotatable-handle {
background: #f5dc58;
border: 1px solid #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
cursor: pointer;
height: 10px;
left: 50%;
margin: 0 0 0 -5px;
position: absolute;
top: -5px;
width: 10px;}
.ui-rotatable-handle.clone {
visibility: hidden;}
</style>
</head>
<body>
<div id="imagediv" style="width:400px;" >
<div style="width:400px;border:1px solid #000;position:relative" >
<img src="lordmeowington.png" width="400px">
<div id="draggable-wrapper" style="position:absolute;top:0">
<div id="resizable-wrapper">
<img src="funny_glasses.png" width="150" height="150" alt=" " id="elem-wrapper" />
</div>
</div>
</div>
</div>
<input type="button" value="saveimage" onclick="demoFromHTML()" />
<input type="button" value="remove" onclick=" Demo()" />
<input type="file" accept="image/*" capture="camera" />
<input type="text" value="" id="innerimage" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.rotatable.js"></script>
<script>
$(document).ready(function() {
var drWr = $('#draggable-wrapper'),
rsWr = $('#resizable-wrapper'),
elem = $('#elem-wrapper');
elem.resizable({
aspectRatio: true,
handles: 'ne, nw, se, sw'
});
drWr.draggable();
elem.parent().rotatable();
});
function Demo()
{
$('.ui-rotatable-handle').css('border','0px');
$('.ui-resizable-handle').css('background','none');
$('.ui-resizable-handle').css('border','none');
$('.ui-rotatable-handle').css('background','none');
html2canvas($("#imagediv"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/jpeg');
imgData.width=400;
console.log(imgData);
var ajax = new XMLHttpRequest();
ajax.open("POST",'testSave.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(imgData);
//window.open(imgData);
}
});
}
</script>
</body>
</html>
Php Code is below
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData=substr($imageData, strpos($imageData, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'test.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
}
?>
I am trying to get youtube videos to be automatically embedded into a webpage.
The webpage has keywords already passed in from the url: /view.php?id=keywords123
These are used for creating content on a template and I need it to also display a relevant video from youtube.
Is there code that will search youtube and return the embed code or the video id to be embedded?
Cheers in advance!
Check this link from IBM. It is a very old link but I wanted to do something similar earlier and helped me a lot. It has some examples about how you will perform a keyword search and parse the xml response.
Check out Youtube Player API
Youtube Player Demo:
http://code.google.com/apis/youtube/youtube_player_demo.html
Youtube Actionscript player api:
http://code.google.com/apis/youtube/flash_api_reference.html
Youtube Javascript player api:
http://code.google.com/apis/youtube/js_api_reference.html
I use jquery to get the youtube embed url:
var re = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.com\S*[^\w\-\s])([\w\-]{11})(?=[^\w\-]|$)(?![?=&+%\w]*(?:['"][^<>]*>|<\/a>))[?=&+%\w-]*/ig;
video_url= text.replace(re,'http://www.youtube.com/embed/$1');
html='<p><iframe width="100%" height="300" src="'+video_url+'" frameborder="0"></iframe></p>';
$("#video_place").append(html);
I would suggest you to use json api, following is the code,cheers.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
alert("");
$("#sc").attr("src","http://gdata.youtube.com/feeds/users/ThePitchUTV/uploads?alt=json-in-script&callback=showMyVideos2");
});
});
function loadVideo(playerUrl, autoplay) {
swfobject.embedSWF(
playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
(autoplay?1:0), 'player', '500', '400', '9.0.0', false,
false, {allowfullscreen: 'true'});
}
function showMyVideos(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul>'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t;
html.push('<li>', title, '</li>');
}
html.push('</ul>');
document.getElementById('videos').innerHTML = html.join('');
}
</script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0"
type="text/javascript"></script>
<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css"/>
<script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js"
type="text/javascript"></script>
<link href="http://www.google.com/uds/solutions/videobar/gsvideobar.css"
rel="stylesheet" type="text/css"/>
<style>
pre {
background-color:#FAFAFA;
border:1px solid #BBBBBB;
font-size:9pt;
line-height:125%;
margin:1em 0pt 0pt;
overflow:auto;
padding:0.99em;
}
code, pre {
color:#007000;
font-family:monospace;
}
.titlec {
font-size: small;
}
ul.videos li {
float: left;
width: 10em;
margin-bottom: 1em;
cursor:pointer;
}
ul.videos
{
margin-bottom: 1em;
padding-left : 0em;
margin-left: 0em;
list-style: none;
}
#videoBar {
width : 160px;
margin-right: 5px;
margin-left: 5px;
padding-top : 4px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 0px;
}
</style>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 400px; float: left; position:relative">
<object id="player"></object>
</div>
<br>
<div id="videos2" style="width:500px; clear:both;height:300px; overflow:auto;"></div>
<script id="sc"
type="text/javascript"
src="http://gdata.youtube.com/feeds/users/ThePitchUTV/uploads?alt=json-in-script&callback=showMyVideos">
</script>
I have this script
say index.html
<html>
<head>
<title>Ajax with jQuery Example</title>
<script type="text/JavaScript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
$("#quote p").load("script.php");
}, 10000);
});</script>
<style type="text/css">
#wrapper {
width: 240px;
height: 80px;
margin: auto;
padding: 10px;
margin-top: 10px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="quote"><p> </p></div>
</div>
</body>
</html>
script.php
<?php
echo "Hello how are you";?>
when loading index.html it is blank for 10 seconds and then it start functioning..how do I get rid of blank and how it can show instantly when browser loads??
Your setInterval() call works as designed: It says "in 10 seconds and then every seconds, do this...."
Add a separate "load" call to do the initial filling:
$(document).ready(function(){
$("#quote p").load("script.php"); // <--- Add this
setInterval(function(){
....