I am adding code to my website so that my logo resizes appropriately.
I wrote a JavaScript function for the logo to resize based on the window width. Unfortunately, when I do this, the logo just resumes to its original size. If I apply an inline style to the image to set the width, it works but if the size of the image is dictated by the CSS file or by my JavaScript, the logo just remains its original size.
Here is the head of my index.html file:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Computer Repair and Services</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Athena Harting" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/MobileMenu.js"></script>
<script src="js/WidthMargin.js"></script>
<script src="js/MobileLogo.js"></script>
</head>
<body>
<div class="container">
<header>
<div class="logospace" id="logospace"><img src="imgs/Logo_Glossy_Web.png"/></div>
<h1>Athenian Computers<span>Founded and operated out of Shoreline, WA</span></h1>
</header>
You will notice that I have a MobileLogo.js and a default.css file referenced in this file.
Here is the relevant code that should be applying to my logo within my default.css file:
/* TEST STUFF */
.logospace {
width: 200px;
height: 200px;
}
And here is my MobileLogo.js file. This file should be appropriately resizing my logo based on the width of the page:
var resize = function(){
var wi = $(window).width();
if(wi <= 519){
$("#logospace").css({
'width' : '50px'
'height' : '50px'
});
}
else if (wi <= 799){
$("#logospace").css({
'width' : '100px'
'height' : '100px''
});
}
else if (wi <= 980){
$("#logospace").css({
'width' : '150px'
'height' : '150px'
});
}
else{
$("#logospace").css({
'width' : '200px'
'height' : '200px'
});
}
}
$(window).ready(function() {
resize();
$(window).resize(function() {
resize();
});
});
Can anyone tell what's wrong?
You have an extra ' in 'height' : '100px''. You may want to remove it.
There are other issues except the extra ': You're missing commas between the style definitions:
$("#logospace").css({
'width' : '50px', <-------- HERE, since it seems tough to see for some
'height' : '50px'
});
The missing comma throws syntax errors and that is halting your entire code. These are missing in all your calls to css().
EDIT:
The div around the image is resizing as it should; when the window resizes, the div resizes. The problem is that the image is not, as displayed in my fiddle. I made the height of the div larger, to display the problem.
To fix this, assign the id or class (or both) to the image, not its parent div.
Related
I am trying to animate elements that are added to the DOM via javascript with GSAP.
Here is the MRE:
HTML
<!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">
<link rel="stylesheet" href="css/style.css">
<title>Recipe Search</title>
</head>
<body>
<section id="searchBackgroundImage">
<section id="searchSection">
<h1>What's In The Fridge</h1>
<button type="button" id="btn">Seach!</button>
<div id="recipeContainer"></div>
<div id="test"><h2>Test</h2></div>
</section>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script text="text/javascript" src="js/main.js"></script>
</body>
</html>
CSS
h2 {
opacity: 0.1;
}
JS
document.querySelector('#btn').addEventListener('click',() => {
getRecipe();
timeline.play();
});
function getRecipe(){
let recipeTitles = `<h2>Cheese Burger</h2><h2>Ham Sandwich</h2>`
document.querySelector('#recipeContainer').innerHTML = recipeTitles
}
const timeline = gsap.timeline({
duration: 1,
paused: true
});
timeline
.to(
'#recipeContainer h2', {
opacity: 1
}
)
So I would like to change the opacity of the h2s.
It is not working because the h2s don't exist when the page first loads.
I was hoping that setting it to paused and only having it play on click would fix the problem, but unfortunately not.
If I change
timeline
.to(
'#recipeContainer h2', {
opacity: 1
}
)
to
timeline
.to(
'#test h2', {
opacity: 1
}
)
Then it works fine for that element.
So it has to be the element being dynamically created but I haven't been able to find a solution.
I've been reading the docs and it seems like I might be able to use TimelineMax and onComplete but I can't figure out how to implement it here.
Here is the codepen:
https://codepen.io/acodeaday/pen/RwJbrWa
Thank you for any help.
The problem here is that the javascript file is compiled before the click event. This means that the browser encounters the following error before the event listener is called.
Solution: Defining the timeline.to() properties inside the event listener will circumvent this problem.
document.querySelector("#btn").addEventListener("click", () => {
getRecipe();
timeline.to("#recipeContainer h2", {
opacity: 1,
});
timeline.play();
});
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 5 years ago.
Improve this question
I am currently attempting to execute this on my site http://www.dynamicdrive.com/dynamicindex4/imagewarp.htm. It seems easy, I have currently called all scripts in my section and called the class in the image I where I want the it. Here is my
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Reflecting our present perception of aesthetics.">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=1, user-scalable=no" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta property="og:url" content="" />
<meta property="og:title" content="" />
<meta property="og:image" content="" />
<meta property="og:description" content="" />
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="icon" type="image/x-icon" href="" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_media-queries.css'); ?>" type="text/css" />
<!-- jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- fontawesome -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex4/jquery.imageWarp.js">
/***********************************************
* jQuery imageWarp script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('img.imagewarp').imageWarp() //apply warp effect to images with CSS class "imagewarp"
})
</script>
</head>
and this is how my image looks
<img src="emb.png" class="imagewarp">
The effect does not seem to appear. Any ideas? Thank you!
See below if it helps i added the script file here as there was no https or cdn link availables .
/* imageWarp jQuery plugin v1.01
* Last updated: June 29th, 2009. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
jQuery.noConflict()
jQuery.imageWarp={
dsettings: {
warpfactor: 1.5, //default increase factor of enlarged image
duration: 1000, //default duration of animation, in millisec
imgopacity: [0.5, 1],
warpopacity: [0.1, 0.5]
},
warpshells: [],
refreshoffsets:function($target, warpshell){
var $offsets=$target.offset()
warpshell.attrs.x=$offsets.left //update x position of original image relative to page
warpshell.attrs.y=$offsets.top
warpshell.newattrs.x=warpshell.attrs.x-((warpshell.newattrs.w-warpshell.attrs.w)/2) //update x position of final warped image relative to page
warpshell.newattrs.y=warpshell.attrs.y-((warpshell.newattrs.h-warpshell.attrs.h)/2)
},
addEffect:function($, $target, options){
var setting={} //create blank object to store combined settings
var setting=jQuery.extend(setting, this.dsettings, options)
var effectpos=this.warpshells.length
var attrs={w:$target.outerWidth(), h:$target.outerHeight()}
var newattrs={w:Math.round(attrs.w*setting.warpfactor), h:Math.round(attrs.h*setting.warpfactor)}
var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', zIndex:1000}).appendTo(document.body)
$target.add($clone).data('pos', effectpos) //save position of image
var $targetlink=$target.parents('a').eq(0)
this.warpshells.push({$clone:$clone, attrs:attrs, newattrs:newattrs, $link:($targetlink.length==1)? $targetlink : null}) //remember info about this warp image instance
$target.click(function(e){
var $this=$(this).css({opacity:setting.imgopacity[0]})
var imageinfo=jQuery.imageWarp.warpshells[$(this).data('pos')]
jQuery.imageWarp.refreshoffsets($this, imageinfo) //refresh offset positions of original and warped images
if (imageinfo.$link){
e.preventDefault()
}
var $clone=imageinfo.$clone
$clone.stop().css({left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:setting.warpopacity[0], visibility:'visible'})
.animate({opacity:setting.warpopacity[1], left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
function(){ //callback function after warping is complete
$clone.css({left:0, top:0, visibility:'hidden'})
$this.css({opacity:setting.imgopacity[1]})
if (imageinfo.$link){
window.location=imageinfo.$link.attr('href')
}
}) //end animate
}) //end click
}
};
jQuery.fn.imageWarp=function(options){
var $=jQuery
return this.each(function(){ //return jQuery obj
var $imgref=$(this)
if (this.tagName!="IMG")
return true //skip to next matched element
if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0){ //if image has explicit width/height attrs defined
jQuery.imageWarp.addEffect($, $imgref, options)
}
else if (this.complete){ //account for IE not firing image.onload
jQuery.imageWarp.addEffect($, $imgref, options)
}
else{
$(this).bind('load', function(){
jQuery.imageWarp.addEffect($, $imgref, options)
})
}
})
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://www.dynamicdrive.com/dynamicindex4/jquery.imageWarp.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('img.imagewarp').imageWarp();
})
</script>
<img src="http://www.mondieu.nu/mag/wp-content/uploads/2017/12/emb.png" class="imagewarp">
Is this possible to use a jQuery face-detection plugin (I'm using this)
to detect human faces in an immersive 360 panorama image (I've used krpano 1.19-pr5 (build 2016-05-24) tools (demo version) to build the panorama files and krpano html5 viewer for rendering. You can download the whole package from here)?
The face-detection plugin works fine with simple 2D images and HTML5 canvases. The krpano viewer also renders the target panorama tiles in a canvas. Below is the code for the html file that renders the panorama image in browser.
<!DOCTYPE html>
<html>
<head>
<title>krpano - test_pano_3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
#-ms-viewport { width:device-width; }
#media only screen and (min-device-width:800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
</style>
</head>
<body>
Try It
<script src="test_pano_3.js"></script>
<div id="pano" style="width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
embedpano({swf:"test_pano_3.swf", xml:"test_pano_3.xml", target:"pano", html5:"prefer", mobilescale:1.0, passQueryParameters:true});
</script>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.facedetection.js"></script>
<script>
$(function () {
"use strict";
$('#try-it').click(function (e) {
e.preventDefault();
$('.face').remove();
var canvas = $("#krpanoSWFObject").find("canvas")[0];
$(canvas).faceDetection({
complete: function (faces) {
console.log(faces);
for (var i = 0; i < faces.length; i++) {
$('<div>', {
'class':'face',
'css': {
'position': 'absolute',
'left': faces[i].x * faces[i].scaleX + 'px',
'top': faces[i].y * faces[i].scaleY + 'px',
'width': faces[i].width * faces[i].scaleX + 'px',
'height': faces[i].height * faces[i].scaleY + 'px'
}
})
.insertAfter(this);
}
},
error:function (code, message) {
alert('Error: ' + message);
}
});
});
});
</script>
</body>
</html>
This:
var canvas = $("#krpanoSWFObject").find("canvas")[0];
should not work as find is not implemented in KRpano plugin. You should try this instead:
var canvas = $("#krpanoSWFObject canvas");
that returns the canvas element :)
Regards,
I have the following code, how can I open another page as modal window popup if row exist?
function editLesson(){
var row = $('#dg').datagrid('getSelected');
if (row){
// would like to open another page as modal window
}
}
Any help is highly appreciable.
you could use fancybox plugin. it's a really great plugin.
http://fancybox.net/ (mind fancybox 2 is out too)
http://jsfiddle.net/kasperfish/5EV8r/109/
$.fancybox('hello');
you also can load iframes in a fancybox (modal) window
http://jsfiddle.net/kasperfish/5EV8r/110/
$.fancybox([
'url'//url to your page
], {
'padding' : 10,
'type' : 'iframe',//set type to iframe
'overlayOpacity' : 0.7,
'overlayColor' : 'black',
'speedIn' : 900,
'speedOut' : 400,
'width' : '70%',
'height' : '50%'
});
You can use JQuery Dialog
as described here:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
http://jqueryui.com/dialog/
I'm trying to build some jQuery functionality into my site and I've caught a snag. I need to split a jQuery block style menu into 2 & possibly 3 columns vs having them all in one column on top of each other. I'll post as much as I can in here. I'm sure I'm missing something blatantly obvious. I'll start with the website I'm going off of:
http://upsidestudio.com/web/splitcol/2/
Now the CSS I've got:
.tabs {
width: 700px;
font-weight: ;
margin: 0;
padding: 0px;
float: left;
}
the <head> of my html: (I think my errors would be in here: I'm new to jQuery/Javascript)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>My Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<!-- !Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />
<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" type="text/css" media="screen" /><![endif]-->
<!-- !jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
// initialize scrollable
$("#browsable").scrollable({circular: true}).navigator().autoscroll({
interval: 10000
});
// initialize scrollable together with the autoscroll plugin
var root = $("#scroller").scrollable({circular: true}).autoscroll({ autoplay: false });
// perform JavaScript after the document is scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div")
});
});
<!-- !jQuery Split Navigation -->
$(document).ready(function() {
$('.tabs').each(function() {
if($(this).is("ol")) { var ordered = true; }
var colsize = Math.round($(this).find("li").size() / 2);
$(this).find("li").each(function(i) {
if (i>=colsize) {
$(this).addClass('right_col');
}
});
if(ordered) {
$(this).find('.right_col').insertAfter(this).wrapAll("<ol class='tabs' start='" + (colsize+1) + "'></ol>").removeClass("right_col");
} else {
$(this).find('.right_col').insertAfter(this).wrapAll("<ul class='tabs'></ul>").removeClass("right_col");
}
});
});
</script>
</head>
And Lastly...My Html section.
<!--THE TABS-->
<hr width="575" size="4" noshade align="left">
<ul class="tabs">
<li>What We Do</li>
<li>How It Works</li>
<li>FAQ</li>
<li>The Ajungo Team</li>
<li>Advertise</li>
</ul>
<hr width="575" size="4" noshade align="left"><br/><br/>
<!--TAB PANES COME IN BELOW THIS-->
Well, the biggest problem I can see there is that you've got a HTML comment stuck in the middle of the script block:
<!-- !jQuery Split Navigation -->
Remove that, then adding
.tabs {
margin-bottom: 20px;
}
And you can see that the ul.tabs list has been split in two. However, there a few inefficiencies in the script. It can be rewritten much, much more cleanly like this:
$('.tabs').each(function() {
var t = $(this), // Store a copy of both $(this) and t.children(),
children = t.children(), // to avoid calling the jQuery function too much
// Create a clone of the original list, then empty it and insert it after the original
secondList = t.clone(false).empty().insertAfter(this),
// Calculate the number of elements to move to the second list
// ie. half the number of elements in the list, divided by two and rounded up
length = Math.ceil(children.length / 2);
// Move half the children of the original list to the new one
children.slice(length).appendTo(secondList);
// If the list is an ordered list, let the list start at the correct position
if(this.nodeName === 'OL'){
secondList.attr('start', length + 1);
}
});
See: http://www.jsfiddle.net/yijiang/Tf4HT/1/