I am trying to get some text to scroll either horizontally , vertically or stay fixed depending on the space the current text needs. If it fits within the container it should stay fixed. If it does not, it should move. I don't know the text in advance and I have dynamic container size.
I am trying to check whether text overflows or not and it works fine out of mounted state for the component. I do this by comparing a combination of scrollheight to clientheight and textcontainer size vs the content container size.
<div id="content-container" :class="behaviourBasedClasses(data)">
<p id="text-container" :style="behaviourBasedTextStyle(data)">{{ text }}</p>
</div>
Updating also works as long as the text fits within the container. The problem is switching between animated and non-animated state. The data attribute in the code contains font-size and other attributes to logically decide the classes to use and the textstyles.
What I would need to solve the problem is the ability to get the text back into non-animated state. Then I could just use the routine I use in mounted state each time the text, font-size or container size changes.
states: no-scroll (non-animated):
<div id="content-container" class="no-scroll">
<p id="text-container" style="font-size:100px;">{{ text }}</p>
</div>
horizontal-scroll (animated):
<div id="content-container" class="scroll-horizontal">
<p id="text-container">{{ text }} style="font-size:120px; padding-left: 663.065px; position: relative; margin: auto 0px; line-height: 662.985px; animation-name: scroll-horizontal2; animation-duration: 79.4095s; animation-timing-function: linear; animation-iteration-count: infinite;"</p>
</div>
If the text is horizontally scrolled the scrollWidth gets really wide and it stays that way whatever change I make to the affecting data. Thus I am unable to get out of scrolling mode.
If I go into devtools and manually edit the markup back to no-scroll state the code works again. But I don't know how to get there programatically.
Related
I have the below structure:
<div class="wrapper1">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
<div class="items">
<ul><li></li></ul>
</div>
The above layout is used for a responsive site. so on resizing the window or on page load on different devices the content in the right div should always remain of the same height as that of the left div.
Also, I have to append a link "more >>" responsively where the last character of the content in the right div ends.
I have used overflow hidden property for the right div and I am trying to give some height to the right div based on the window width using media queries. Have tried different things but since the text amount changes responsively it is becoming difficult to append more link to the last character.
Also, i tried using jquery/jscript to detect the height of the left div on page load so as to set the height of the right div same as that using .outerheight() property but on initial load of the page I am not able to get the height in pixels since the width of the image inside the left div is set to 100%.
Also, there are 2 main issues here,
1)I set the height of the left div same as that of the right div responsively. Here the extra content to be displayes in the right div should always be hidden.
2) append more link just where last last charcter of the last visible line of the content on the left div is responsively.
Could anyone please suggest some solution.
With flexbox the columns share the same height automatically, without any javascript.
.wrapper {
display: flex;
}
.left {
background: yellow;
flex: 1;
}
.right {
background: red;
flex: 1;
}
<div class="wrapper">
<div class="left">some img here with 100% width and some text which dispaly on hovering over the image</div>
<div class="right">some content here</div>
</div>
I believe all your problem will be solved if and only if you use bootstrap css rules the grid system and furthermore make a class with specific height and assign it to the div . And more advice get familiar with media query in css3
Create a div with relative position for appending links and make it in the bottom of the container div
Here is a pen for what I have so far. I've been using CSS3 however I'm open to using other methods if it will work better:
.userAttributes > .attributeGroup > .favoriteArtistsAttr {
max-width: 74%;
animation: marquee 10s linear infinite;
}
#keyframes marquee {
0% { text-indent: 0; }
100% { text-indent: -100%; }
}
I'd like the marquee to begin repeating itself the moment that as the end of the p has slid into frame. I also need the marque to stop with a mousover and be scrollable (this part works already).
I found this example that accomplishes what I want to achieve. I noticed that they are doing so by duplicating the content, however I've been unable to get this to work correctly. I also wonder if this is the best way to achieve my goal, maybe it would be better to use javascript or some jquery plugin? I want to make sure that it works and looks the same on all browsers (within reason)
I've updated your originally linked example fiddle with your 'genres' heading:
http://codepen.io/anon/pen/oxEPeZ
What I've noticed is that your markup you provided is a bit wrong, so going on the original this is what's happening:
The title block should be in it's own separate div. I've set my version of your title to float to the left of the marquee div.
Then, the marquee div needs to be wide enough to contain all the text- I set it to 500px so the items don't start stacking when they reach the maximum width of the container.
After that, you need to make sure you have two spans with your content. In your link you were working on, you only had one paragraph tag for each list of items. That's the main reason why it wasn't repeating.
So now, our markup for just the Genre section looks like this:
<div class="title">
Genres:
</div>
<div class="marquee">
<div>
<span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span>
<span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span>
</div>
</div>
I've put the marquee and title into a container div and duplicated it for the favourite artists.... (this can be named whatever, but what I have done here is used margin-bottom to create the space below each item, instead of <br> tags).
Because our second ticker has more content, I've added another class called 'stretched' to give the marquee more width.
I know I haven't directly edited your fiddle sorry, however hopefully this helps get you out of trouble.
Can I detect the width of a dynamicaly filled div box without rendering it on the web page?
<div>{{some.data.from.some.model}}</div>
If I render it, I know it's width is 260px (in every modern browser).
Can I detect it, before it is rendered on the web page? Are there tools, mechanisms, libraries to do that?
My Imagination is:
That is the div box width this class (margin, padding, whatever)
This is the content (text, font, fontsize, whatever..)
Tell me it's width
Don't show it on the homepage yet, I'll decide afterwards
You can't get the size of an element that doesn't exist (hasn't been rendered). Any solution you find to calculating an element's size without it being rendered is probably not going to be cross-browser.
So, the best you can do is render said element out of view, be it via "visibility: hidden", or pushing it out of view with "display: fixed". Once you have an actual element, you can check it's size for the current browser via JS and proceed accordingly.
I have created a simple fiddle here: http://jsfiddle.net/5wq8o02q/.
HTML
<div id="playground" class="block">
some content
</div>
<span id="width"> </span>
CSS
.block {
/* width: 100px; */
height: 100px;
}
JQUERY:
$(function(){
//$('#playground').css('visibility','hidden');
$('#playground').css('display','none');
$('#width').html($('#playground').css('width'));
});
It helps to use display: none and it won't use screen real estate as visibility: hidden. It still gives the width you are looking for (I think). Let me know me it helps ...
I have following setup:
<div class="wrapper">
<div class="element" id="first"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
...
</div>
so wrapper is set to overflow-x: auto and content that overflows it is horizontally scrollable. #first div has fixed position and more styling applied, but essentially it is always visible and other divs scroll behind it, like this:
issue here is that I'm using drag and drop functionality which works fine, but once I try to drop stuff on a fixed div and if it has content behind it, the drag and drop happens to that content. Basically feels like I'm interacting with stuff behind fixed div even though it is in front. I know fixed elements are out of the flow and maybe this is whats causing it? But I can't figure out how to make content behind that div stay behind it.
Well... It maybe because fixed elements are out of the flow.
You can try setting the element with id first as absolute and giving it a high z-index value. A high value of z-index will make it stay on top of other elements.
So when others scroll it will remain at that position.
Try plaing with ay pointer-events: none; in CSS
I have a div called calendar that is inside a div called cal-container. The calendar has width:100% so currently it takes up the whole cal-container.
I need to add a side-panel div. This div will have a fixed width of 150 pixels. Thus, #calendar width should be #cal-container width - 150px. Is this possible with CSS or am I forced to use a table?
If it is possible, is there an example? I googled it but nothing like what I want came up.
The side-panel can be hidden and shown by click a button so adding padding will not work.
Here is an idea of what I mean:
The days part is #calendar, and the Unscheduled part is the side panel of 150px.
I tried floating the calendar left, and cloating the side panel right and giving it a width of 150px. But the idea is if I hide that div, the calendar should then take 100%.
Thanks
Like this, the blue would be side and calendar be the left, but calendar needs to take up the room side does not when hidden.
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Result of float:
Got a working solution for you here.
The code to get this working basically hinges on the following structure:
<div class="sideBar">
...
</div>
<div class="tableWrapper">
<table>
...
</table>
</div>
Next, make sure the elements have these significant CSS properties:
.sideBar {
float: right;
}
.tableWrapper {
overflow: hidden;
}
table {
width: 100%;
}
What's happening here is that the .sideBar floats right, and takes up whatever space it needs to. Meanwhile, the .tableWrapper will take up whatever space is left by virtue of overflow: hidden. Finally, tell the table to take up 100% of its available width.
Click the button in the demo to see the table automatically resize.
All major browsers and IE10 support flexbox. Not supported < IE10.