I have two similar controller methods that I'm using to test the #PathVariable annotation with:
#RequestMapping(
value = "/1",
method = {RequestMethod.GET})
public String two(Model model)
{
model.addAttribute("category", "acategory");
model.addAttribute("subCategory", "placeholder");
return "homePage";
}
#RequestMapping(
path = "/{category}/{subcategory}",
method = {RequestMethod.GET})
public String three(
#PathVariable("category") String category,
#PathVariable("subcategory") String subcategory,
Model model)
{
model.addAttribute("category", "acategory");
model.addAttribute("subCategory", "placeholder");
return "homePage";
}
I would expect the exact same behavior from those two methods since I am not using the path variables passed in, and instead just hardcoding "acategory" and "placeholder". However when I navigate to localhost:8080/1 I see the content I expect but navigating to localhost:8080/asdf/asdf breaks my HTML.
Here is the HTML in question:
</head>
<body>
<div class="wrapper"> <!-- Entire page wrapper? -->
<!-- Thymeleaf fragment: commonHeader -->
<div th:replace="fragments/commonFragments :: commonHeader"></div>
<!-- Begin Page Content-->
<div th:insert="'fragments/' + ${category} :: ${subCategory}"></div>
<!-- End Page Content -->
</div> <!-- Entire page wrapper closing tag? -->
And the fragment:
<div th:fragment="placeholder">
<div class="container">
<div class="row tagline">
<div class="col-sm-12">
<p><strong>Please see page two for all related links. </strong>
<!--There's also a 3-column version of this page.--> Link to a
secondary page open accordion <a data-expand="#SecurityPanel" href="page2.html#collapse1">1</a>, <a
data-expand="#SecurityPanel" href="page2.html#collapse2">2</a>, or <a
data-expand="#SecurityPanel" href="page2.html#collapse3">3</a>.. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus hendrerit consectetur justo, vitae euismod nisl pulvinar id. In
hac habitasse platea dictumst. Nam quis ante at mi auctor vehicula. <a href="page2.html">Learn
more</a>. </p>
</div>
</div>
... more stuff cut for brevity
</div>
</div>
You probably have relative links to your CSS file, which break when you start using nested URLs. Change them to absolute links to fix it.
Related
I have this piece of code, which displays a list of features in an editable input field and text area. It gives the ability to the user to change the UI dynamically.
<div v-for="feature in features" :key="feature.name" class="relative mt-4 mb-4">
<h3 class="text-md leading-6 font-medium text-color-700">
Feature-{{feature.id + 1}}
</h3>
<div class="sm:col-span-6">
<div class="mt-1 flex rounded-md shadow-sm">
<input id="name" v-model="features[feature.id].name" type="text" name="name" class="flex-1 text-field-style block w-full min-w-0 text-xs" placeholder="heading" >
</div>
</div>
<div class="sm:col-span-6">
<div class="mt-1 flex rounded-md shadow-sm">
<textarea id="description" v-model="features[feature.id].description" placeholder="description" name="description" rows="3" class="block w-full text-xs text-field-style"></textarea>
</div>
</div>
</div>
In the UI, whenever I start typing in the input field, the cursor jumps out right after typing one letter. It is working fine in the text-area field. I am little new to Vue, so not able to figure out why this is happening.
features is an array of objects which is rendered elsewhere
features: [
{
id: 0,
name: 'Invite team members',
description: 'Tempor tellus in aliquet eu et sit nulla tellus. Suspendisse est, molestie blandit quis ac. Lacus.',
},
{
id: 1,
name: 'Notifications',
description: 'Ornare donec rhoncus vitae nisl velit, neque, mauris dictum duis. Nibh urna non parturient.',
}]
The problem is, that you using the same date to generate your elements in your v-for loop, as you use in your v-model. I guess that features is reactive data and therefore you having this trouble because of trying to manipulate it.
As you tagged vuex you should not manipulate data outside of your store. If you need to edit already existing data in a form, just provide a new object based on the current data of features:
myModelData = JSON.parse(JSON.stringify(this.features))
In this case myModelData data won´t be bound to features, so you can edit it in your inputs. After doing so, pass it to your store to update features. Note that if features changes while editing myModelData, myModelData won´t react to the change.
A few hours trying to implement Infinite Scroll in the blog. The goal is simple, the main page is too long, I want it to load gradually. The authors of the plugin have a perfectly working example, however, no matter what I do, in my case, the plugin doesn’t work properly. I guess I'm missing something.
If I understood correctly, then the plugin works like this: we create a common div and articles inside it. When entering a page, a person sees the first article, when he scrolls down to the next article, the page is enlarged and 2 article is already displayed, and so on. It seems to be what I am doing.
I tried to attach it through the link
<script src = "https://unpkg.com/infinite-scroll#3/dist/infinite-scroll.pkgd.min.js"> </ script>
Tried to upload file to server
<script src = "js/infinite-scroll.pkgd.min.js"> </script>
I tried to make the elements themselves through jQuery, JavaScript and just html, as suggested in the documentation, but all is unsuccessful.
This is a link to a very simple page of the site where I tried to implement it: https://dinarkino.ru/new. At the moment, all paragraphs are loaded at once, although each of them is wrapped in a separate
<article class = "post"> ... </ article>
I'll be very thankful for help!
Make sure you are running the page from http// address, infinite scroll will not work if you are running it from you local files. I set up a local environment using node, npm and express that looks like this ...
var express = require("express");
var PORT = 8080;
var app = express();
app.use(express.static("public"))
app.listen(PORT, function(){
console.log("App listening on PORT: " + PORT)
})
So my folder structure looks like this
.
├── node_modules
│
├── public
│ |── page1.html
│ |__ page2.html
│ |__ page3.html
│
├── server.js
│
Each section you want to load has to be its own .html file.
So the body page1.html would look like this. I changed your code to include
a div inside of the container to hold the posts and gave the data-infinite-scroll attribute to the div .posts-feed. Then I moved this
<div class="scroller-status">
<div class="loader-ellips infinite-scroll-request">
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
</div>
<p class="scroller-status__message infinite-scroll-last">End of content</p>
<p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
</div>
<p class="pagination">
<a class="pagination__next" href="page2.html">Next page</a>
</p>
To be inside of container.
<body>
<div class="main">
<div class="container" >
<div class ="posts-feed" data-infinite-scroll='{ "path": ".pagination__next", "append": ".post", "status": ".scroller-status", "hideNav": ".pagination"}' >
<article class="post">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit in sem eu elementum. Nam sagittis eleifend aliquam. Cras viverra, sapien vel auctor viverra, augue leo commodo ipsum, id euismod elit nisl id felis. Integer vitae mauris est. Cras vitae varius tortor. Nullam tristique ullamcorper imperdiet. Suspendisse potenti. Donec in elit felis. Donec eget nunc porttitor, lobortis lectus id, sagittis urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vitae ornare purus. Sed augue purus, cursus in malesuada non, interdum molestie massa. In interdum nisi at purus gravida rutrum. Praesent finibus lacus ac imperdiet tincidunt.</p>
<p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
</article>
</div>
<div class="scroller-status">
<div class="loader-ellips infinite-scroll-request">
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
</div>
<p class="scroller-status__message infinite-scroll-last">End of content</p>
<p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
</div>
<p class="pagination">
<a class="pagination__next" href="page2.html">Next page</a>
</p>
</div>
</div>
</body>
Notice how at the end there is a piece that looks like this
<p class="pagination">
<a class="pagination__next" href="page2.html">Next page</a>
</p>
This is telling infinite scroll what to load next in href. This here will then load the contents from a separate file called page2.html
Then one page2.html that same section should read
<p class="pagination">
<a class="pagination__next" href="page3.html">Next page</a>
</p>
so that page3.html contents are loaded.
I'm trying to put my company logo on the right corner of my html document
Here my code:
<script>
$(document).ready(function() {
$head = $('#header');
$head.prepend('<div class="knitr source"><img src="logo.png" width="220px" align="right" ></div>')
});
</script>
---
title: "Title"
author: "Author"
date: "Date"
theme: bootstrap
output: html_document
keep_md: true
---
```{r echo=FALSE, include=FALSE}
knitr::include_graphics('./logo.png')
```
<br>
## 1) Header
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
However, because the logo.png is a local file when sharing the html document people are not able to see it.
Additionally, I tried the following approach
---
title: "Title"
author: "Author"
date: "Date"
output:
html_document:
css: markdown.css
includes:
in_header: extLogo.html
---
where extLogo.html
<div class="logos"><img src="logo.png" width="220px" align="right"></div>
But it creates a div outside the div where the Title is (<div class="container-fluid main-container">). Can anyone help on this?
You can use htmltools::img with a little inline CSS for positioning. src can take a path directly, but when images aren't just handled like plots, sometimes knitting fails to convert images to a URI properly, which in turn causes them to fail to render. Using self_contained: false in the YAML is a quick solution, but it's not much harder to use knitr::image_uri to manually convert the image:
---
title: "Title"
author: "Author"
output: html_document
---
```{r, echo=FALSE}
htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")),
alt = 'logo',
style = 'position:absolute; top:0; right:0; padding:10px;')
```
---
# 1. Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
The accepted answer works if you are using classical html output. If like me, you also work with bookdown, the logo need to appear on every pages. So, in case somebody find this answer but want to add a logo with bookdown, I give my proposition:
We need to create an external file with a script to be called in header, thankfully we can create it directly in the rmarkdown script.
We also use htmltools::img to allow including the image without external image file.
Here is my rmarkdown script to be used as an example:
---
title: "Logo with Bookdown"
author: "Author"
date: '`r format(Sys.time(), "%d %B, %Y")`'
output:
bookdown::gitbook:
includes:
in_header: header.html
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r htmlTemplate, echo=FALSE}
# Create the external file
img <- htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")),
alt = 'logo',
style = 'position:absolute; top:50px; right:1%; padding:10px;z-index:200;')
htmlhead <- paste0('
<script>
document.write(\'<div class="logos">',img,'</div>\')
</script>
')
readr::write_lines(htmlhead, path = "header.html")
```
# Page 1
This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.
When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:
```{r cars}
summary(cars)
```
# Page 2
You can also embed plots, for example:
```{r pressure, echo=FALSE}
plot(pressure)
```
Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.
I took a quite different approach to the answers above, using only CSS and without absolute positioning. I added the following CSS code chunk to my document, but you can also create a standalone CSS file and include that in the Rmd YAML header.
```{css, echo=FALSE}
#header {
background-image: url("data: BASE64 encoded string for image");
background-repeat: no-repeat;
background-position: 95%;
padding: 5px;
}
#header > * {
max-width: calc(100% - 225px);
}
#media only screen and (max-width:600px){
#header > .title {
margin-top: 105px;
}
#header > *
max-width: 100%;
}
#header {
background-position: 10px 10px;
}
}
```
There's a few things going on here. To address the original question about the image, you need to base64 encode the image yourself and put the string into the background-image URL.
It also handles the issue of overlap of logo and header content in a reactive way, setting max-width on all header elements, and placing the logo above the title on narrow windows (less than 600px).
If you don't care about overlap at all, then you only really need the first #header selector code. If you don't care about the narrow device reactive layout then you can keep the first two selectors and drop the #media block.
The two pixel values 225px and 105px are based on my logo, and will need to be changed to fit your image plus some padding.
#alistaire's accepted answer was really useful. However in my case the title and the logo were overlapping, since the title in my markdown is really long.
Looking around I came up with the following solution, and I post it in case is useful for anybody.
```{js logo-js, echo=FALSE}
$(document).ready(function() {
$('#header').parent().prepend('<div id=\"logo\"><img src=\"www/xxxxx.png\" style=\"position:absolute; top:0; right:0; padding:20px; height:120px\"></div>');
$('#header').css('margin-right', '120px')
});
```
This should be added anywhere in the markdown, and of course it only works for HTML output. The idea is to add a new div for the logo, and then add a margin-right to the title so that it does not overlap.
Note that I don't think this is really optimal; my use of css is clumsy and if somebody figures out a better way I'm glad to hear. Anyhow it seems works ok.
As a complement to alistaire answer, and answering the question from Marco. One can use width, and height to select the size of the figure. For example,
---
title: "Title"
author: "Author"
output: html_document
---
```{r, echo=FALSE}
htmltools::img(src = knitr::image_uri(file.path(R.home("doc"), "html", "logo.jpg")),
alt = 'logo',
style = 'position:absolute; top:0; right:0; padding:10px;',
width = "300px",
heigth = "300px")
```
---
# 1. Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor
In case you make a rmarkdown website and you would like to add a logo to the right in the navbar:
In the _site.yml include a before_body:
include:
before_body: logo.html
In the html template:
<script type="text/javascript">
$(function() {
$('.navbar-right').before($('.logo'));
})
</script>
<div class="logo pull-right">
<img src="logo.png" alt="logo" width="150" style="margin-top: 15px;">
</div>
Key is to include the pull-right class in the div you insert.
To get the logo top right aligned inside the header div, do this:
Make file called header-logo.html containing:
<script>
$(document).ready(function() {
$('#header').prepend('<img src="https://via.placeholder.com/350x350" style="float:right" width="30%"/>');
});
</script>
Update your .Rmd with:
output:
html_document:
includes:
in_header: header-logo.html
base64 encode the logo manually and replace the url in src if you want the .HTML be self contained.
What I am trying to do is find a chunk of HTML that has comments chunk!--/block--> and move it in its entirety right after header. The thing is that the comment always remains the same but the chunk varies through pages using find and replace in Dreamweaver. Here is a quick sample:
<!--header-->
<header>Hello</header>
<!--/header-->
This is where the chunk needs to be moved
<h1>Hello content</h1>
<p>lorem ipsum</p>
This is the chunk, it has a starting comment and ending one, I thought it might be used as a references for RegEx including everything inside.
<!--block-->
<p>hello world</p>
<!--/block-->
Ok. You didn't specify the language for reular expression but this PHP code does what you need I just wrote it and tested it. As a bonus I wrote the final result back to the source page.
First you have your original file, I called mine source.php
<!--header--> <header>SO HERE IS THE HEADER</header> <!--/header-->
<div>this is information that is above ID CARR, but will be below the div ID carr once php is done executing..</div>
<div id="carr"> Phasellus laoreet dolor magna, et tempor mi dictum eu. Aenean pellentesque vulputate tortor. Vestibulum odio velit, faucibus sed dui non, laoreet facilisis sem. Curabitur a magna ligula. Cras cursus vel dui placerat posuere. Donec ullamcorper risus eu lobortis dignissim. Nullam fermentum est diam, sed lacinia sapien ornare et. </div> <div>here is more informatin on the bottom</div>
Then you have another page called index.php that does what you want. In this example I am targeting the above.
<?php
$page_path = 'source.php';
$source = file_get_contents($page_path);
$regex = '#\<div id="carr">(.+?)\</div>#s';
preg_match($regex, $source, $matches);
$match = $matches[0];
$a = explode("</header>", $source);
//strip out what we found with regular expression
$first = str_replace($match, '', $source);
//append it to the place where you need it.
$final = str_replace('<!--/header-->', '<!--/header-->'.$match, $first);
echo $final;
$fp = fopen($page_path, 'w+');//w+ erases r+ point at begining of file.
fwrite($fp, $final);
fclose($fp);
?>
Should have been very easy but somehow cannot get it to work. I want to display truncated text on my blog home page with a 'read more' link that shows up inline with the text i.e.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac tortor et felis aliquet vestibulum sed in sem. Aliquam pharetra ultricies nunc, non pellentesque ... Read More
Since I use simple_format for my text, all breaks in the text get wrapped in tags and I get Read More in a separate line as below
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac tortor et felis aliquet vestibulum sed in sem. Aliquam pharetra ultricies nunc, non pellentesque ...
Read More
How do I place it inline after a < p > tag. Guess it's more of a CSS question rather than a Rails one. Again, I feel this should be super simple. What am I forgetting?
Here's the code snippet in the view
<%= simple_format truncate(h(feed.description), length: 400, separator: ' ') %><%= link_to "Read More", feed_path(feed)%>
I suspect that you can just put your link inside the simple_format content-parameter link this:
<%= simple_format truncate((h(feed.description) + link_to("Read More", feed_path(feed))), length: 400, separator: ' ') %>
(Note: not tested)