I have a two-column page (<p> tags after the first half are moved to column 2 with javascript).
My problem is that I want to break it up into "pages" like you'd see if you were reading a PDF.
Is there a neat way to do this? Or do I need to check if each page is overflowing programmatically as I fill them? Would that even work?
A possible way to do it is to make all different div's with all the copy in it and then with scrollTop go to the according page/collumn.
Something like:
<div id="page1" class="page">
<div id="p1_column_1" class="column">Here all the copy</div>
<div id="p1_column_2" class="column">Here all the copy</div>
</div>
<div id="page2" class="page">
<div id="p2_column_1" class="column">Here all the copy</div>
<div id="p2_column_2" class="column">Here all the copy</div>
</div>
Then css give it a height a width and overflow hidden and then with javascript/jquery something like:
var curr_col = 0;
var col_height = $('.column').height();
$('.column').each(function() {
$(this).scrollTop(col_height*curr_col);
curr_col++;
})
Edit
Check this fiddle to see the result: http://jsfiddle.net/taPjR/3/ .
In the example I copied the text with jQuery from the first div.
And I know it's very a dirty way, but I'm not sure if there is another keeping different fonts/font sizes and the images in the copy in mind.
Maybe a pdf generator like LaTex (http://www.latex-project.org/) could also be interesting?
Hope I could help.
Related
I'm building a modular building program and have a side panel where the user can add the code of a module in order to make it appear in the list.
The list is simply span tags with text in. Since they are already in a set order in the HTML, they appear in that default order when they are made visible, rather than appearing at the bottom of the list each time a new one is made visible.
My workaround is to make all of the spans positioned absolute and use some jQuery/JS to do some calculations and move the latest visible-made span to the bottom.
This code works in moving the input field and button to the bottom of the list:
var searchModule = 0;
$("#add_module_button").click(function(){
searchModule = "#" + document.getElementById("add_module_input").value;
$(searchModule).css('display', 'block');
visibleModules = $('.side_module:visible').length * 50 + "px";
$('#add_a_module').css('top', visibleModules);
});
Is there a better solution out there for re-arranging HTML elements without essentially faking it with absolute positioning?
If I get you right it's actually quite easy. Make use of jQuery.append(). If you use jQuery.append() to append an item to the same container it's already contained in, the item is actually removed from its current location and appended at the end. As far as I read your question that's what you want. The example below shows the basic idea ...
$('#container').append($('#three').css('display', 'block'));
$('#container').append($('#one').css('display', 'block'));
$('#container').append($('#five').css('display', 'block'));
.item{
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="item" id="one">One</div>
<div class="item" id="two">Two</div>
<div class="item" id="three">Three</div>
<div class="item" id="four">Four</div>
<div class="item" id="five">Five</div>
</div>
I need to print invoice with unknown number of items, and at the end of the invoice there is terms and conditions that is also - unknown number of lines.
So i have something similar to this:
<body>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
</div>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
</div>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
<div class="termsAndConditions"></div>
</div>
</body>
So now the page has a background image, that contains the identity of the company, and at the top there is logo. In the div of marginTop I am skipping number of lines so there is nothing to be printed their.
So in invoice content I always have it in the right place.
Now the terms and conditions comes as a variable that holds a text of html, the user will type it and i will read it and show it here.
What I want, that if the customer entered long term and conditions I want to break it into pages. But the thing is I cannot break it because i don't know where to break exactly, as it can be any thing especially if it contains html code. And I want when it got printed out the top margin should be always their.
Can anyone give me any clues?
I can only use simple JavaScript, I cannot use jQuery, and I cannot get the height of the content after page load, any JavaScript should be used while rendering. I have tried to do that but it did not work.
I have some text in a website that I want to change using javascript because I can't change it any other way.
In short, the site is laid out like such:
...some other divs before here, body, head, etc...
<div id="header" class="container-fluid clearfix">
<div class = "hero-unit">
<h1 class="title">Support Center</h1>
...some other divs for other parts of the page...
</div>
</div>
...more divs, footer, etc...
I don't need the text to change on click or anything like that I just want it to be set on load to something different than Support Center but I'm not sure if I'm placing the script in the correct place or if the syntax is wrong?
I've tried placing it before and after and it doesn't seem to work. Here is the code:
<script type="text/javascript">
var targetDiv = document.getElementByID("header").getElementsByClassName("hero-unit")[0].getElementsByClassName("title")[0];
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
</script>
Thank you.
Looking at the actual source of your page, your page does not contain a h1 element with a class of title.
Your actual source code
<div id="header" class="container-fluid clearfix">
<div class="hero-unit"></div>
<div class="container-fluid clearfix">
<div class="row-fluid">
<div class="leftcolumn"></div>
<div class="rightcolumn"></div>
</div>
</div>
</div>
This means it does not exist till some point after your page loads. You need to put your code after the code that generates the h1 title element
In jQuery (if you can use it), you'd use something like
$("#title").text("Something else");
it looks like you are not getting the specific class to change the html
try with querySelector like i have done
JS Fiddle
var targetDiv = document.querySelector('#header > .hero-unit > h1.title')
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
So let's say I have this scenario of articles:
I have a photo in the left and the content of the article right after the image.
In the content area I have a reservation button.
If the article is reserved, then it will be displayed a small image over the bottom of the photo (transparent written "Reserved").
This stuff is all done.
What I want to do next is to remove the hyperlink-button "Reserve" from the article if it's reserved. Should look like this:
-NormalIMG- [Reservation-Button]
-NormalIMG- [Reservation-Button]
-ReservedIMG- *
-NormalIMG- [Reservation-Button]
-ReservedIMG- *
-NormalIMG- [Reservation-Button]
and so on.
*here's no reservation button
So it's something like this:
Reserve
<!-- reserved article -->
<div class="article">
<div class="image"></div>
<div class="image-reserved"><img src="reserved.jpg" /></div>
<div class="content">
Reserve
</div>
</div>
<!-- reserved article //-->
<!-- unreserved article -->
<div class="article">
<div class="image"></div>
<div class="image-reserved"></div>
<div class="content">
Reserve
</div>
</div>
<!-- unreserved article //-->
<!-- reserved article -->
<div class="article">
<div class="image"></div>
<div class="image-reserved"><img src="reserved.jpg" /></div>
<div class="content">
Reserve
</div>
</div>
<!-- reserved article //-->
I tried with jQuery something like this:
if(!($('.image-reserved').find(img))) {
$('.reserveLink').addCSS('display', 'none');
}
But I got all the "Reserve" links removed...
I realized that I need something that should apply that CSS attribute only after the element 'img' was found.
After that, it should continue the search and apply it when it has to.
I lost all my day trying to figure out a way to get out of this by implementing different structures (using find, has, next, etc.) similar to the above example... but no success.
I'm posting here as a last resort, my hope is completely lost to something that seemed to be so easy to implement...
IMPORTANT NOTE: I know the structure looks weird and it might be really hard for what I want to be implemented, but I am not allowed to modify any code that was written already.
You shoud iterate over each image-reserved :
// For each image reserved
$(".image-reserved").each(function(){
// Count the children
var count = $(this).children("img").length;
// If there's a child (The reserved img), then we delete the following links
if(count > 0){
$(this).next().children(".reserveLink").hide();
}
});
$('.image-reserved').next().hide()
I'd suggest:
$('.content').filter(function(){
return $(this).prev('div.image-reserved').find('img').length;
}).find('a').remove();
JS Fiddle demo.
References:
filter().
find().
prev().
remove().
$('div.image-reserved:not(:empty)+.content a.reserveLink') will find all .image-reserved divs that have content, and select the .reserveLink links in the .content element after them.
So let's say have the following content structure:
<div class="wrapper">
<div class="contentOne" style="width:50px"></div>
<div class="contentTwo"></div>
<div class="contentThree"></div>
<div class="contentFour"></div>
</div>
What I want to achieve on page load, is for the width of the 1st div (contentOne) to be picked up and increment the width of the other 3 divs by 50px. In the end I want the following:
<div class="wrapper">
<div class="contentOne" style="width:50px"></div>
<div class="contentTwo" style="width:100px"></div>
<div class="contentThree" style="width:150px"></div>
<div class="contentFour" style="width:200px"></div>
</div>
First prize would be for this to be possibly using CSS3 Calc. If not JS will be a close 1st princess.
Thanks
Right now, CSS has no preceding-sibling selector (although there is a "following sibling" selector, for some reason), so a pure CSS solution isn't yet possible. jQuery would be something like this:
$('div:not(:first)').each(function()
{
$(this).width($(this).prev().width() + 50);
});
Use Jquery to this . The code would be something like this. Please make the changes appropriate this is just a demo code.
var widthOfFirstChild=$('.wrapper').eq(1).width();
$('.width div').each(
function(){
$(this).attr('style':widthOfFirstChild+50);
widthOfFirstChild=+50
});