I have two table rows at an HTML file: the first one is empty and the other one has a background image. I would like to know if there's any way to get that background image and transfer it to the first row when it gets clicked.
(Right now I'm setting the background image at the CSS code, but I think that I'll have to move it to the HTML in order for it to work. Or maybe not?)
Thanks for the help!
index.html
<head>
<style>
div {
width: 50px;
height: 50px;
border: 1px solid red;
}
#id1 {
background-image: url('action-icons.png');
}
</style>
</head>
<body>
<div id='id1'>xxx</div>
<div id='id2'>yyy</div>
</body>
index.dart
import 'dart:html';
main () {
querySelector('#id2').onClick.listen((e) {
var div1 = querySelector('#id1');
var div2 = querySelector('#id2');
div2.style.backgroundImage = div1.getComputedStyle().backgroundImage;
div1.style.backgroundImage = 'none';
});
}
Related
I've been trying to remove the outer borders of my calendar, however the best I've managed is to get all the borders removed (or just horizontal/vertical borders removed). I only need the outer borders gone (the picture shows what I need gone; the bottom of the calendar isn't in the screenshot https://i.stack.imgur.com/hXAYP.png). So far, I've spent a long in chrome dev tools trying to figure out exactly where I can do this, but I cannot seem to find a solution.
For reference, I'm using a css file to override the fullcalendar css. I don't think my code is necessary, as I can't even find the right element that would only remove the outer borders. I am using border-style: none !important; I have tried border: 0px !important; as well.
The element I am looking for is probably in the cdn for the css aspect of fullcalendarv5: https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.css
EDIT: Code
cal.html sample:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.css">
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.min.css"> -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
events: '/event_view/',
headerToolbar: {
left: 'dayGridMonth,timeGridWeek,timeGridDay, listWeek',
},
height:'97vh',
});
calendar.render();
});
</script>
{% load static %}
<link rel="stylesheet" href="{% static 'calendar_app/cal.css' %}" type="text/css">
<!-- Event making stuff; not relevant-->
<div class="content-calendar" id="content", name="content-calendar">
<div id='calendar'></div>
</div>
cal.css sample:
.fc {
color: green;
}
./*THE ELEMENT I CURRENTLY CANNOT FIND WOULD GO HERE*/ {
border-style: none !important;
}
You can simply use border:none on this .fc-scrollgrid class to remove border from top and left
To remove border from the side we need to use last-of-type pseudo-class to only remove border-right from td using .fc-scrollgrid td:last-of-type
Working Fiddle Demo: https://jsfiddle.net/alwayshelping/hte2pz0f/
Run snippet below to see it working. There are no borders as exactly as you wanted in the picture.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
/*events: '/event_view/',*/
headerToolbar: {
left: 'dayGridMonth,timeGridWeek,timeGridDay, listWeek',
},
height: '97vh',
});
calendar.render();
});
.fc-scrollgrid {
border: none !important;
}
.fc-scrollgrid td:last-of-type {
border-right: none !important;
}
<!-- Event making stuff; not relevant-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.css">
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.min.css"> -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.1.0/main.min.js"></script>
<div class="content-calendar" id="content" , name="content-calendar">
<div id='calendar'></div>
</div>
use this scss styles (hide all out borders)
.calendar-wrapper {
.fc-scrollgrid {
border-color: transparent !important;
}
.fc-scrollgrid td:last-of-type {
border-right-color: transparent !important;
}
.fc-scrollgrid-section.fc-scrollgrid-section-body td[role='presentation'] {
border-bottom-color: transparent !important;
}
[role='row']:last-of-type td {
border-bottom-color: transparent !important;
}
th[role='presentation'] {
border-right-color: transparent !important;
}
}
I have this website - https://www.emeraldhill.rs/
On the home page, there is this part - https://prnt.sc/qp2ri0
If you click on any of these images it will take you to the page "Reference". Right after the page is loaded, depending on the position of the building you selected on the home page, it will start scrolling until it finds the right block. I set the anchor links.
What I want is to avoid the scrolling part and land on the block that I choose on the home page instantly.
How can I achieve this?
The website is built with Divi theme.
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_scrollintoview
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
background: green;
}
#content {
margin:500px;
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<button onclick="myFunction()">Scroll</button>
<div id="myDIV">
<div id="content">
Some text inside an element.
</div>
</div>
<script>
function myFunction() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
}
</script>
</body>
</html>
This is what you exactly need,and the referance link is provided above.
I gave you what you want in javascript.
I am not good in wordpress but i think you can edit divi theme.
I have a problem with checking CSS properties in a Testcafe session.
I have a progres bar on the site with the html:
<div class="progress-bar progress-bar-success"></div>
When the operation is ready, this progress ba becomes a width of 100%.
<div class="progress-bar progress-bar-success" style="width: 100%;"></div>
In my code I use now the line
await t.expect(Selector('.progress-bar.progress-bar-success').getStyleProperty('width')).eql('100%', {timeout: 90000})
But it will not work. It waits the whole time until the waiting time has finished.
I use a similar function inside another run, where I wait for changing the color of an item with CSS and RGB, this works perfectly.
I think now the problem is, that the style is not available on startup. Or is there any other possibility?
The issue occurs because according to the docs the getStyleProperty method returns the computed value of width, which means that the value is returned in pixels, while you want to check the value in percents.
As a solution, I recommend you use the ClientFunctions mechanism, which allows you to get the desired value.
I prepared a sample for you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bar {
width: 500px;
height: 50px;
border: 1px solid black;
overflow: hidden;
}
.progress {
height: 100%;
background-color: black;
}
</style>
</head>
<body>
<div class="bar">
<div class="progress" style="width: 0;"></div>
</div>
<script>
setInterval(function () {
var progress = document.querySelector('.progress');
progress.style.width = Math.min(100, parseInt(progress.style.width) + 1) + '%';
}, 50);
</script>
</body>
</html>
And here is the test code:
import { Selector, ClientFunction } from 'testcafe';
fixture `progress`
.page `index.html`;
const getStyleWidthInPercents = ClientFunction(() => {
return document.querySelector('.progress').style.width;
});
test('progress', async t => {
await t.expect(getStyleWidthInPercents()).eql('100%', {timeout: 90000})
});
The bootstrap documentation on that topic is a little confusing to me. I want to achieve similar behaviour like in the docs with the affix navbar: The navbar is below a paragraph / page heading, and upon scrolling down it should first scroll along until reaching the top of the page, and then stick there fixed for further scrolldowns.
As jsFiddle does not work with the navbar concept, I've set up a separate page for usage as a minimal example: http://i08fs1.ira.uka.de/~s_drr/navbar.html
I use this as my navbar:
<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
<div class="navbar-inner">
<div class="container">
<div class="span12">
<a class="brand" href="#">My Brand</a>
This is my navbar.
</div>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div> <!-- navbar -->
I thinkg i would want data-offset-top to be of value 0 (since the bar should "stick" to the very top" but with 50 there is at least some effect watchable.
If also put the javascript code in place:
<script>
$(document).ready (function (){
$(".navbar").affix ();
});
</script>
Any help appreciated.
I was having a similar problem, and I believe I found an improved solution.
Don't bother specifying data-offset-top in your HTML. Instead, specify it when you call .affix():
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
The advantage here is that you can change the layout of your site without needing to update the data-offset-top attribute. Since this uses the actual computed position of the element, it also prevents inconsistencies with browsers that render the element at a slightly different position.
You will still need to clamp the element to the top with CSS. Furthermore, I had to set width: 100% on the nav element since .nav elements with position: fixed misbehave for some reason:
#nav.affix {
position: fixed;
top: 0px;
width: 100%;
}
One last thing: When an affixed element becomes fixed, its element no longer takes up space on the page, resulting in the elements below it to "jump". To prevent this ugliness, I wrap the navbar in a div whose height I set to be equal to the navbar at runtime:
<div id="nav-wrapper">
<div id="nav" class="navbar">
<!-- ... -->
</div>
</div>
.
$('#nav-wrapper').height($("#nav").height());
Here's the obligatory jsFiddle to see it in action.
Just implemented this for the first time, and here's what I've found.
The data-offset-top value is the amount of pixels that you must scroll in order for the affixing effect to take place. In your case, once 50px is scrolled, the class on your item is changed from .affix-top to .affix. You'd probably want to set data-offset-top to about 130px in your use case.
Once this class change occurs, you must position your element in css by styling the positioning for class .affix. Bootstrap 2.1 already defines .affix as position: fixed; so all you need to do is add your own position values.
Example:
.affix {
position: fixed;
top: 20px;
left: 0px;
}
To fix this very issue I have modified the affix plugin to emit a jQuery event when an object is affixed or unaffixed.
Here is the pull request: https://github.com/twitter/bootstrap/pull/4712
And the code: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js
And then do this to attach the navbar:
<script type="text/javascript">
$(function(){
$('#navbar').on('affixed', function () {
$('#navbar').addClass('navbar-fixed-top')
});
$('#navbar').on('unaffixed', function () {
$('#navbar').removeClass('navbar-fixed-top')
});
});
</script>
You need to remove .affix() from your script.
Bootstrap gives the option of accomplishing things either via data-attributes or straight JavaScript most of the time.
I've got this from the twitterbootstrap's source code and it's working pretty well:
HTML:
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul id="navbar" class="nav nav-list bs-docs-sidenav">
...
</ul>
</div>
</div>
CSS:
.bs-docs-sidenav {
max-height: 340px;
overflow-y: scroll;
}
.affix {
position: fixed;
top: 50px;
width: 240px;
}
JS:
$(document).ready(function(){
var $window = $(window);
setTimeout(function () {
$('.bs-docs-sidenav').affix({
offset: {
top: function (){
return $window.width() <= 980 ? 290 : 210
}
}
})
}, 100);
});
You just need to remove the script. Here is my example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<style>
#content {
width: 800px;
height: 2000px;
background: #f5f5f5;
margin: 0 auto;
}
.menu {
background: #ccc;
width: 200px;
height: 400px;
float: left;
}
.affix {
position: fixed;
top: 20px;
left: auto;
right: auto;
}
</style>
</head>
<body>
<div id="content">
<div style="height: 200px"></div>
<div class="affix-top" data-spy="affix" data-offset-top="180">
<div class="menu">AFFIX BAR</div>
</div>
</div>
</body>
</html>
Thanks to namuol and Dave Kiss for the solution.
In my case I had a tiny problem with navbar height and width when I used afflix and collapse plugins together. The problem with width can be easily solved inheriting it from parent element (container in my case). Also I could manage to make it collapsing smoothly with a bit of javascript (coffeescript actually). The trick is to set wrapper height to auto before collapse toggle occurs and fix it back after.
Markup (haml):
#wrapper
#navbar.navbar
.navbar-inner
%a.btn.btn-navbar.btn-collapse
%span.icon-bar
%span.icon-bar
%span.icon-bar
#menu.nav-collapse
-# Menu goes here
CSS:
#wrapper {
width: inherit;
}
#navbar {
&.affix {
top: 0;
width: inherit;
}
}
Coffeescript:
class Navigation
#initialize: ->
#navbar = $('#navbar')
#menu = $('#menu')
#wrapper = $('#wrapper')
#navbar.affix({offset: #navbar.position()})
#adjustWrapperHeight(#navbar.height())
#navbar.find('a.btn-collapse').on 'click', () => #collapse()
#menu.on 'shown', () => #adjustWrapperHeight(#navbar.height())
#menu.on 'hidden', () => #adjustWrapperHeight(#navbar.height())
#collapse: ->
#adjustWrapperHeight("auto")
#menu.collapse('toggle')
#adjustWrapperHeight: (height) ->
#wrapper.css("height", height)
$ ->
Navigation.initialize()
My solution for attach the navbar :
function affixnolag(){
$navbar = $('#navbar');
if($navbar.length < 1)
return false;
h_obj = $navbar.height();
$navbar
.on('affixed', function(){
$navbar.after('<div id="nvfix_tmp" style="height:'+h_obj+'px">');
})
.on('unaffixed', function(){
if($('#nvfix_tmp').length > 0)
$('#nvfix_tmp').remove();
});
}
Similar to the accepted answer, you can also do something like the following to do everything in one go:
$('#nav').affix({
offset: { top: $('#nav').offset().top }
}).wrap(function() {
return $('<div></div>', {
height: $(this).outerHeight()
});
});
This not only invokes the affix plugin, but will also wrap the affixed element in a div which will maintian the original height of the navbar.
I'm trying to get two Divs to sit side by side. I want one div to take up as much width as is needed and the other to to take up the remaining width so both divs span 100% width. Is this possible? I've tried floating and a bunch of different positioning settings but I can't find a solution that works. I naturally thought that adding a float: left to the left most element would work, however when you try to add padding/margin/border to the right element the browser wont apply it. Here is some code that I've extended (from an existing answer) to illustrate the problem.
<style>
#foo {
float: left;
background: red;
height: 100%;
padding: 5px;
}
#bar {
background: green;
border: solid 1px blue;
padding: 5px;
height: 100%;
}
</style>
<div>
<div id="foo">foo</div>
<div id="bar">bar</div>
</div>
If you open this code up in a browser you'll notice that the bar div isn't padded, and the border isn't applied to it... I have no idea why.
Thanks for any help.
This works:
<style>
#foo {
float: left;
background: red;
}
#bar {
background: green;
}
</style>
<div>
<div id="foo">foo</div>
<div id="bar">bar</div>
</div>
http://pastehtml.com/view/19ldeqq.html
why not use a table, set the whole table width to 100% and then each of the rows without a width, like so:
<table width="100%" border="0">
<tr>
<td><div>DIV INFO LEFT</div></td>
<td><div>DIV INFO RIGHT</div></td>
</tr>
</table>
This is using javascript, but it is the only way I have found to do this.
<script type="text/javascript">
window.onload = shouldNotBeThisHard;
window.onresize = shouldNotBeThisHard;
function shouldNotBeThisHard() {
var j = document.getElementById('divThatYouWantAllOf');
var k = document.getElementById('divForRestOfScreen');
var jh = 0;
if (j)
jh = j.clientWidth;
var h = (window.innerWidth - (jh + 30));
k.style.width= h + "px";
}
</script>
with the HTML looking like this:
<div id="divForRestOfScreen" style="float:left;overflow:auto;">
asdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds
dsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
sdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd
</div>
<div id="divThatYouWantAllOf" style="float:right" >
This is why I hate web programming.
</div>