Text gets below footer when zooming - web

Im experimenting a little with responsive design and i noticed that if you zoom the page in the browser or with smaller screens the text extends behind and below the footer despite it being set absolute with bottom: 0;
Can anyone explain how to solve this?
body {
margin: 0;
}
footer {
width: 590px;
height: 100px;
border: 5px solid black;
position: absolute;
bottom: 0;
}
footer h1 {
height:0px;
margin-left: 25px;
}
h1 {
font-size: 50px;
}
p {
text-align: justify;
}
.container {
width: 600px;
padding: 30px;
}
<!DOCTYPE=html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div class="container">
<h1>heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<footer>
<h1>footer</h1>
</footer>
</div>
</body>
</html>

Related

How can I make a (first) letter uppercase in tinyMCE?

We use the latest version of tinyMCE.
We have the following text - example given - take care at the first letter after the end of a proposition:
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
How can we scan the text and properly capitalise the first letter in the proposition/phrase?

Remove link tag that have some URL with Cheerio

I have an HTML code that I am processing with the Cheerio library, I need to delete the tag "http://www.example.com'> example " for the links that refer to a domain (in this case "http://www.example.com") but not the other links. In addition, in the case of the link label being deleted, the keyword that contains it must be maintained.
Example origin:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Example result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Thank you!
I found the solution to my problem:
$('a').each(function() {
if ($(this).attr("href").indexOf('example.com') > -1) {
$(this).replaceWith($(this).html());
}
});
If I use the .remove() function it delete the complete tag, but with this solution it only delete the link tag that contains example.com in the href attr.
I hope this helps to other people with the same challence. ;)
It sounds like you want:
$('a[href*="www.example.com"]').remove()
or
$('a[href*="www.example.com"]').each((i, a) => $(a).replaceWith($(a).text()))

sublime text 3 select lines after finding a specific word

I have this text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
I want in Sublime text 3, to select the lines that have "Lorem" without using the mouse.
Thank You, for the help.
Your text were pasted in one line in Sublime Text so i manually moved each sentence into a single line. Then I used this regex:
^.*\b(Lorem)\b.*
In the search function, getting this result:
Click for fullsize
Note that you will have to enable the Regular Expression in the bottom left corner.

reformat blocks of text to line width

As a programmer, I frequently find myself using text editors rather than proprietry editing tools (like word) to smudge out
blocks of text. But I and I'm sure many of you with OCD find it rather annoying when you need to edit a line above
what you've already written, causing a jutting line out from your nicely formatted lines. I have had no other solution to this
problem other than re-new-lining every single line thereafter to correct the margins.
for lack of a better definition: Is there a better way of reformatting blocks of text to a given line width. if possible by selection
as well?
possible scenario:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
becomes:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
according to a predefined setting.
I am using sublime text 2.
I use Sublime Text 3, select text, go to Edit -> Wrap -> ...
hope that works in version 2

Sencha: scrollable vbox layout with a tabpanel inside

I just started working with Sencha Touch 2.3.
I've got a NavigationView.
Inside of it there is a View (layout: 'vbox') composed by two panel (flex: 0) and one tabpanel (flex: 1). The View should be entirely scrollable.
The problem is that the content of the tabpanel is not entirely visible and not fill the entire page.
If the layout property of the tabpanel is set to 'fit' it's content is show properly, the entire view scroll as aspected but the tabpanel stop working. Same result if I put the tabpanel inside an outer container and set to it 'layout: fit'.
This is an extract of my code:
Ext.define('App.view.athletes.Detail', {
extend: 'Ext.Panel',
xtype: 'athleteDetail',
config: {
itemId: 'view-athleteDetail',
title: '...',
layout: 'vbox',
items: [
{
xtype: 'panel',
itemId: 'component-wrapper',
scrollable: true,
flex: 1
}
]
}
Inside of 'component-wrapper' I dynamically create and add the 3 components described above:
this.topComponent = Ext.create('Ext.Panel', {
flex: 0,
layout: 'hbox',
items: [
{
xtype: 'panel',
....
....
},
{
xtype: 'panel',
....
....
}
]
});
this.baseInfoComponent = Ext.create('Ext.Panel', {
flex: 0,
html: '...'
});
this.bottomComponent = Ext.create('Ext.TabPanel', {
flex: 1,
tabBarPosition: 'top',
styleHtmlContent : true,
items: [
{
........
},
{
........
}
]
});
Thanx in advance.
Cheers
Remove the "component-wrapper" panel. And add those dynamic panels inside "view-athleteDetails". For understanding, try this:
config: {
cls: 'main',
itemId: 'view-athleteDetail',
title: '...',
layout: 'vbox',
items: [{
xtype: 'panel',
flex: 0,
layout: 'hbox',
items: [{
xtype: 'panel'
}, {
xtype: 'panel'
}]
}, {
xtype: 'panel',
flex: 0,
html: 'O meri jaan'
}, {
xtype: 'tabpanel',
flex: 1,
tabBarPosition: 'bottom',
styleHtmlContent : true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
}, {
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}]
}]
}
This fits into the entire page.
Sencha has a difficulty with setting auto height for components inside vbox. I propose you to set height manually when switching tabs. Look at activeitemchange listener and fixHeight function below:
Ext.application({
name: 'Test',
requires: [
'Ext.MessageBox',
'Ext.TitleBar',
'Ext.tab.Panel'
],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('Ext.Container', {
scrollable: 'vertical',
layout: 'vbox',
items: [{
xtype: 'titlebar',
title: 'Test',
docked: 'top'
}, {
xtype: 'panel',
height: 100,
layout: 'hbox',
padding: 10,
defaults: {
width: 80,
margin: '0 5px'
},
items: [{
style: {
'background-color': '#B1654B'
}
}, {
style: {
'background-color': '#F79273'
}
}, {
style: {
'background-color': '#FDC08E'
}
}, {
style: {
'background-color': '#FFF6B9'
}
},{
style: {
'background-color': '#99D1B7'
}
}]
}, {
xtype: 'tabpanel',
height: 0,
style: {
'border': '2px solid #555'
},
defaults: {
style: {
'padding': '10px 5px',
'background-color': '#EFFFE0'
}
},
items: [{
xtype: 'panel',
title: 'tab 1',
html: 'panel 1<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}, {
xtype: 'panel',
title: 'tab 2',
html: 'panel 2<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
}, {
xtype: 'panel',
title: 'tab 3',
html: 'panel 3<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.'
}],
listeners: {
activeitemchange: function() {
this.fixHeight();
},
scope: this,
order: 'after'
}
}]
}));
this.fixHeight();
},
fixHeight: function() {
var tabPanel = Ext.Viewport.down('tabpanel'),
tabBar = tabPanel.down('tabbar'),
dh = 10,
h;
tabPanel.setHeight(0);// reset tab panel height
h = tabPanel.getActiveItem().element.dom.scrollHeight + tabBar.element.getHeight() + dh;
tabPanel.setHeight(h);
}
});

Resources