Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
This post was edited and submitted for review 1 year ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I am trying to add class to element.
.html5-video-player {
-webkit-transform: rotate(90deg) !important;
-moz-transform: rotate(90deg) !important;
-o-transform: rotate(90deg) !important;
-ms-transform: rotate(90deg) !important;
transform: rotate(90deg) !important;
}
test
I can't add CSS to element. I need to rotate in mobile devices. So I will later add bootstrap class #media (max-width: 767.98px) { to element after make it working.
Here is codepen.
I can't directly embed video in my website as I don't have space for that. I need it as link or link button. If watch_popup method don't work, I can also try bootstrap modal which has button, clicking on it will pop up embeded video. Rotating that to 90 degree to full screen also acceptable. Or any other javascript/jQuery method out there to make it happen? I need the rotation(Full screen) in mobile devices only.
I added the video content in <iframe>. Clicking <button> rotates <iframe> 90 degrees.
function rotate(){
document.getElementById("special-container").setAttribute("style", "display: inline !important");
document.getElementById("camera_view").setAttribute("style","transform: rotate(90deg)");
}
a{
background-color: #4CAF50;
border: none;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a onclick="rotate()">Rotate</a>
<div id="special-container" class="embed-responsive embed-responsive-16by9" style="display: none;">
<iframe id="camera_view" class="embed-responsive-item container well well-small span6"
style="height: 720px; width: 1280px; background-color: #2e2e2e;"
src="https://www.youtube.com/watch_popup?v=p-_qed5LTTg">
</iframe>
</div>
</body>
</html>
You forgot class="html5-video-player" in thé link 'a'
Related
I'm trying to teach myself front end development through online resources like w3schools.com and code academy and I have the very most basics down in HTML and CSS. I started a little portfolio web page project to test myself and see what I don't know. while following along with a menu icon animation tutorial on w3schools https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js I got stuck when my code animation didn't want to run. I copy and pasted the code from the tutorial into a new visual studio's file and it ran with no problem. I believe that it has to do with the fact that my Javascript code is in a different file and i linked it to HTML code improperly but when I moved it around it still didn't work so I'm at a complete lost as to what could be the problem. any help is much appreciated
HTML Code:
<!DOCTYPE html>
<html>
<head>
<link href="main page.css" rel="stylesheet">
<title>Cal's Blog</title>
</head>
<body>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script src="main page.js"></script>
</body>
CSS Code:
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
JavaScript Code:
function myFunction(x) {x.classlist.toggle("change");}
your function must be:
function myFunction(x) {
x.classList.toggle("change");
}
It's classList with capital "L" not "l".
looks like your problem is in the script tag,
<script src="main page.js"></script>
should probably be
<script src="main/page.js"></script>?
I looked here where the error is:
You mistakenly referenced the file, completely normal.
To make it work, you must navigate between the folders and select the file.
To do that, in my opinion, you should start by typing a "./" and then let VSCode (for example) show you which folders/files are in that directory.
Your JavaScript code have a mistake on "classlist", should be x.classList.toggle("change"); like W3Schools teach. That piece of code is CamelCase.
Here is the correct code, taking into account that you have a folder in the root of your project called "main", with the files "page.css" and "page.js"
<link type="text/css" rel="stylesheet" href="./main/page.css">
and
<script type="text/javascript" src="./main/page.js"></script>
I'm looking to create a floating action button for my mobile application. Similar to the ones used in the Gmail and WhatsApp mobile applications (see the red button in the image).
I'm building a small app using jQuery Mobile and I would like the button to bring the user to another page. I've been researching for quite a while, with mixed results, but the main problem seems to be that the button doesn't sit above all of the other content on the page and doesn't stay fixed in a position once the user scrolls the page.
Does anyone have any resources or knowledge that could assist? Thank you
The JQM footer has already the fixed positioning and the correct z-index which plays nicely together with the other JQM widgets, like panels and so on. Why don't use that?
The classes ui-btn-left and ui-btn-right don't behaves well in footer, so I am using a grid with transparent background. The advantage with this approach is that You can quickly add more buttons, if You need it later.
.ui-footer {
border-width: 0 !important;
background: transparent !important;
}
.ui-grid-d {
overflow: visible !important;
background: transparent !important;
}
.ui-grid-d > .ui-block-a,
.ui-grid-d > .ui-block-b,
.ui-grid-d > .ui-block-c,
.ui-grid-d > .ui-block-d,
.ui-grid-d > .ui-block-e {
text-align: center !important;
background: transparent !important;
padding-top: .3em;
padding-bottom: .9em;
}
.ui-icon-big {
height: 40px !important;
width: 40px !important;
margin-top: -18px !important;
border-radius: 20px !important;
}
.ui-icon-big:after {
width: 32px !important;
height: 32px !important;
background-size: 22px !important;
background-color: #F4123D !important;
background-color: rgba(244, 18, 61, 0.8) !important;
margin-top: -16px !important;
margin-left: -16px !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="script.js">
</script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content">
<h3>Page content</h3>
<hr>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-grid-d">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-d"></div>
<div class="ui-block-e">
</div>
</div>
</div>
</div>
</body>
</html>
Moreover, You can decide to use data-tap-toggle="false" on not (default is true) to allow Your users to show the footer buttons on demand, when the page content is bigger than the screen height.
this is more a CSS question than a JS question although you could use either to solve it. In CSS that button element or whatever element contains it should have the attributes; position: absolute; and a z-index: x; (a z-index which is higher than any other element in the DOM). If you try to solve this with JS then you still have to have a z-index property and that only works when and element has a fixed, absolute, or relative position attribute... so you may as well just use CSS. you could use js to determine the hight of the window (the device height on mobile since the browsers are not resize-able like on a desktop) and then set the top: Xpx attribute so that to button appears to be in the same position regardless of the device.
I think this pen would help you. It has a tutorial link.
To make sure that your button is above all other elements, add z-index: 999 to your button in css.
You can think of z-index as layers.
So a z-index: 2 element will be above a z-index:1 element.
For further details about the z-index css property go here and here.
Here you are:
https://material.io/develop/web/components/buttons/floating-action-buttons/
Read more about it here:
https://material.io/design/components/buttons-floating-action-button.html
Have you tried using the "fixed" or "sticky" property values in CSS to hold the image in a relative position to browser window or user's scroll position?
Hope this helps, it's the first idea that comes to mind.
https://www.w3schools.com/cssref/pr_class_position.asp
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 6 years ago.
Improve this question
I am searching a lot but don't know how to name it properly.
Idea:
We have two divs together. The first one on the left have a lot of content, more than the one on right side. The second one have only form to be filled up and send. When user scrolls the left div for more information, the right side with contact form will follow to the end of this div. And when user scrolls up, this form on the right will follow it too.
How to detect it? Is there any framework?
I have a lot of divs in website and each one must have this script.
Screen to show what I mean:
Link to page:
LINK
Check following links:
http://www.jqueryscript.net/layout/jQuery-Plugin-To-Fix-Element-Within-Its-Parent-Container-nail.html
Demo: http://www.jqueryscript.net/demo/jQuery-Plugin-To-Fix-Element-Within-Its-Parent-Container-nail/
http://www.jqueryscript.net/layout/Super-Tiny-jQuery-Plugin-For-Sticky-Elements-Sticky.html
Demo: http://www.jqueryscript.net/demo/Super-Tiny-jQuery-Plugin-For-Sticky-Elements-Sticky/
http://www.jqueryscript.net/layout/Multipurpose-jQuery-Sticky-Sidebar-Plugin-scrollWith.html
Demo: http://www.jqueryscript.net/demo/Multipurpose-jQuery-Sticky-Sidebar-Plugin-scrollWith/scrollwith-single-first.html
You can use the CSS position: fixed; for the right side.
is this what you want. the concept is to use position:fixed and right:0 and/or top:10px properties with your css. this is a small example for it.hope this will help.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body{
width: 100%;
height: 1000px;
background-color: orange;
}
.right{
width: 30%;
position: fixed;
right: 0;
height: 500px;
background-color: gray;
}
.check{
position: absolute;
top: 900px;
}
</style>
<body>
<div class="right">
<h2>send an email</h2>
</div>
<h1 class="check">checkin the view</h1>
</body>
</html>
values are to get an idea, change those as your need.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I am using Joomla and the T3 template. I added the following "Custom Code" before the </head> tag:
<style type="text/stylesheet">
div.t3-sidebar.t3-sidebar-right{
background: #F8F8F8 none repeat scroll 0% 0%;
border: 1px solid rgb(238, 238, 238);
border-radius: 20px;
}
button.btn.btn-primary.off-canvas-toggle{
font-size: 28px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("button.btn.btn-primary.off-canvas-toggle i.fa.fa-bars").addClass("fa-user").removeClass("fa-bars");
});
</script>
When I use my browsers development tools I can see those tags in the head where they should be, but when I inspect the elements, the styles are not applied.
Edit: the style is working now, I foolishly used the wrong type. Thank you to everyone who proposed this change.
Concerning the script problem: I do not get any errors in the console.
Final Edit: The problem with the script is resolved. It was either a problem with the name of the jQuery function (jQuery instead of $) or a problem with the brackets of the document.ready function.
Your CSS is not working, because
<style type="text/stylesheet">
should be
<style type="text/css">
And your javascript is not working, because you did not import jQuery.
There are many ways to import jQuery, this is one of them:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
It should be text/css
Here is the modified code.
<style type="text/css">
div.t3-sidebar.t3-sidebar-right{
background: #F8F8F8 none repeat scroll 0% 0%;
border: 1px solid rgb(238, 238, 238);
border-radius: 20px;
}
button.btn.btn-primary.off-canvas-toggle{
font-size: 28px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("button.btn.btn-primary.off-canvas-toggle i.fa.fa-bars").addClass("fa-user").removeClass("fa-bars");
});
</script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
If fixed all of the issues I had yesterday, but when I drag my file into any brower, it just says "Hello" and doesn't include the element at all nor does it hide when clicked.
MyIndex.html
<!DOCTYPE HTML>
<HTML>
<head></head>
<body>
<title>Mary Bishop</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type="text/javascript" src="jscript.js"></script>
<div ID="contact">Hello</div>
</body>
</HTML>
stylesheet.css
#contact {
height: 100px;
width: 100px;
background-color: #517F8F;
border-radius: 25px;
border: 2px solid blue;
text-align: center;
display: block;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
jscript.js
$(document).ready(function(){
$('#contact').click(function(){
$(this).hide();
});
});
I moved the body tag up to include all of the links (as you can see in the current HTML file), but that didn't change anything :( I'm so confused. Any help would be greatly appreciated. Thanks
You probably have your files inside of other folders. For example, does the folder that contains your files look something like this?:
MyWebsite
scripts <-- this is a folder
jscript.js <-- this file is in the "scripts" folder
stylesheets
stylesheet.css
MyIndex.html
If so, then you'll need to update your <link> and <script> tags so that they look like this:
<link href="stylesheets/stylesheet.css" type="text/css" rel="stylesheet">
^^^^^^^^^^^^ <- this should be the name of the folder
that your stylesheet lives in
<script type="text/javascript" src="scripts/jscript.js"></script>
^^^^^^^^
Basically, you need to add the appropriate folders to your links: otherwise they point to the wrong place.
You can quickly load the source code for your webpage by hitting [control][u] in Chrome. You will then see the JavaScript and Stylesheet URLs as links. You can click on these to follow them to see if they are working correctly.
The <body> element should include only the <div> element. Otherwise, the code you posted seems to be working. Check to make sure this fiddle is what you want.
Html:
<div ID="contact">Hello</div>
CSS:
#contact {
height: 100px;
width: 100px;
background-color: #517F8F;
border-radius: 25px;
border: 2px solid blue;
text-align: center;
display: block;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
JavaScript:
$(document).ready(function(){
$('#contact').click(function(){
$(this).hide();
});
});