I'm using Mermaid in Obsidian and Wordpress. In both, the following short diagram has the connecting arrows covering the title:
Is there any way to fix this without CSS or changing to horizontal?
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.0.1/mermaid.min.js"></script>
<div class="mermaid">
flowchart TD
subgraph "your home"
host(You open a connection to a home server)
end
subgraph "fast peering"
host<-->fast1(I'm super close to the destination)
fast1<--what a quick trip! -->server(destination server)
end
subgraph "slow peering"
host<-->server2(I'm still far away)
server2<-- this takes a few milliseconds-->server3(Still too far...)
server3<-- this takes a few more milliseconds-->server4(are we there yet?)
server4<-- this takes precious milliseconds-->server5(almost there!)
server5<-- whew, finally! -->server
end
</div>
You can set an explicit id for the subgraph, e.g. subgraph FP [fast peering]. Then, set the direction to the subgraph, e.g. Home <---> FP.
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.0.1/mermaid.min.js"></script>
<div class="mermaid">
flowchart TD
subgraph Home [your home]
host(You open a connection to a home server)
end
subgraph FP [fast peering]
fast1(I'm super close to the destination)
fast1<--what a quick trip! -->server(destination server)
end
subgraph SP [slow peering]
server2(I'm still far away)
server2<-- this takes a few milliseconds-->server3(Still too far...)
server3<-- this takes a few more milliseconds-->server4(are we there yet?)
server4<-- this takes precious milliseconds-->server5(almost there!)
server5<-- whew, finally! -->server
end
Home <---> FP
Home <---> SP
</div>
Related
I'm trying to remove all the HTML tags and comments within the following cell in Google Sheets:
<div class="prod-desc" itemprop="description">
<div class="row">
<div class="col-md-8">
<p>This is a 100 count box of the ACC-DX01A Proximity Card to be used with any of our DX line of Access Control Readers. It is the size of a credit card so it can easily fit into your wallet. Use these like a proximity card and carry them on your key ring for easy access. </p>
<p> Please note: To add a DX Card or FOB to the DX Access Control System, you must use the Auto/Add Function. If you need assistance, FREE US based tech support is just a phone call away. </p>
</div>
<!-- Description Side Bar START ************************************ -->
<div class="col-md-4"> <img src="/images_templ/Accesss-Control_product-image.jpg"> <span class="boxtitle ">Full Line of Access Control</span> <span style="font-size: 18px; font-family: inherit; font-weight: 400">Access Control Proximity Card Readers and Electronic Door Locks and more!</span> </div>
<!-- Description Side Bar END ************************************ -->
</div>
</div>
So ideally the input should come out as:
This is a 100 count box of the ACC-DX01A Proximity Card to be used with any of our DX line of Access Control Readers. It is the size of a credit card so it can easily fit into your wallet. Use these like a proximity card and carry them on your key ring for easy access.
Please note: To add a DX Card or FOB to the DX Access Control System, you must use the Auto/Add Function. If you need assistance, FREE US based tech support is just a phone call away.
Full Line of Access Control Access Control Proximity Card Readers and Electronic Door Locks and more!
I've searched around found several answers, however, none of them seems to be working for me, maybe it's because of the new lines and carriage returns? I don't know. What I want to do is remove all the HTML and keep all the newlines and carriage returns in the text. Here are some posts that I was following:
Remove HTML In Google Sheets Cells
https://superuser.com/questions/564727/html-tags-in-google-spreadsheet
try like this:
=ARRAYFORMULA(TEXTJOIN(CHAR(10), 1,
TRIM(SPLIT(REGEXREPLACE(A1, "</?\S+[^<>]*>", ), CHAR(10)))))
Yes. Besides the answer that #player0 gave, you can also use 'Search and Replace' ctrl+H And then just paste all you wish to change/remove and replace it with nothing. It works for more than 1 cell too.
Its more laborious but you can target the entire book or ranges if needed.
I have a simple website that is running on a raspberry Pi chriminium in kiosk mode.
The page has two parts;
Page-1.php and Page2.php
Each page has a redirect to the other with a meta tag refresh so it rotates.
I want to remove the white flash that shows between page loads because it really ruins the look of the page.
Can someone suggest a way? I tried adding
<meta http-equiv="Page-Enter" content="blendTrans(Duration=10.0)">
to the headers but the white flash is still there.
Thanks in advance.
Got it figured out with Jquery:
function toggle_contents() {
$('#page1').toggle("slow", "linear");
$('#page2').toggle("slow", "linear");
setTimeout(function(){toggle_contents()}, 3000)
}
toggle_contents();
<div id="container">
<div id="page1">This is page 1 contents.</div>
<div id="page2" style="display:none;">This is page 2 contents.</div>
</div>
http://jsfiddle.net/mxwv85px/1/
I am designing a site that has images that when hovered over fade a text appears.
I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.
DIV with text over an image on hover
Here is my amended code, amended
CSS
p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
div.containerdiv{position:relative}
div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
div.texts:hover{display:block}
html
<div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
<img src="images/cncpt.jpg" alt="background">
<div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
<!-- end .grid_8 -->
Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!
Any ideas on how to solve this would be greatly appreciated.
Thanks,
John
A simple answer using CSS is to use the :hover pseudo class on an anchor tag.
Set you image container as position:relative in CSS.
Create a div containing your text, formatted using html and CSS inside the image container. Position this absolute in CSS. Absolute positioning positions elements relative to the parent container positioned relative. If no element is set to position relative it will take its position from the body tag. It is important to set a width to the element too.
THE HTML
<div class="container">
<a><img src="img.jpg" alt="background">
<div class="text">I will show on hover</div>
</a>
</div>
CSS
div.container{position:relative;}
div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}
a:hover div.text{display:block;}
This will position the text over the container you set to position relative aligning to the top left corner. The z-index stacks elements one above the other. The higher the z-index the higher the element is in the stack.
w3 schools have some excellent definitions and examples on all the code above if it is new to you.
The effect you are after can be achieved with html and css alone. I would advise you focus on:
design your site on paper
layout your page with html and CSS
add your rollover effects and jQuery animations
before adding the jQuery animation
CSS3 transitions are not compatible with all browsers, there are work arounds in CSS though a jQuery fallback is often used.
Please look at the jsfiddle
I am wanting to be able to click on home and about and for it to scroll to where the centre of where the href is located?
<a name="index">home</a>
<a name="about">about</a>
<div></div>
<div class="home"></div>
but even this bit of code isn't working. Why?
I want a navigation panel with Home, About, Contact and Info Horizontally placed. And I want that to be perfectly in the centre. and to be fixed position.
I have managed to do this by
$(window).scroll(function(){
$('.navigation').css({
'right': $(this).scrollLeft()
});
});
But it is not perfectly in the centre I then want when you click on one of these it navigates you to the corresponding part of the page which is on a horizontal line with the other pages.
This is what you need:
home
about
<a><div id="about"></div></a>
<a><div id="index" class="home"></div></a>
explanation: href="#index" uses # and that indicates you use an id.
Put an id with the same name in de div.. and you go to that place
You dont even need the <a> tags in de div
I'm building a website where college students can order delivery food. One special attribute about our site is that customers have to choose a preset delivery time. For example we have a drop at 7pm, 10pm, and at midnight.
All the information about the food is static (ie price, description, name), except the quantity remaining for that specific drop time.
Obviously i didn't want to hardcode the HTML for all the food items on my menu page, so i wrote a forloop in the html template. So i need to store the quantity remaining for the specific time somewhere in my model. the only problem is that I'm scared that if i use the same variable to transport the quantity remaining number to my template, i'll give out wrong information if alot of people are accessing the menu page at the same time.
For example, lets say the 7pm drop has 10 burritos remaining. And the 10pm drop has 40 burritos. Is there a chance that if someone has faster internet than the other customer, the wrong quantity remaining will display?
how would you guys go around to solve this problem?
i basically need a way to tell my template the quantity remaining for that specific time. and using the solution i have now, doesn't make me feel at ease. Esp if many people are going to be accessing the site at the same time.
view.py
orders = OrderItem.objects.filter(date__range=[now - timedelta(hours=20), now]).filter(time=hour)
steak_and_egg = 0
queso = 0
for food in orders:
if food.product.name == "Steak and Egg Burrito":
steak_and_egg = steak_and_egg + food.quantity
elif food.product.name == "Queso Burrito":
queso = queso + food.quantity
#if burritos are sold out, then tell template not to display "buy" link
quantity_steak_and_egg = max_cotixan_steak_and_egg - steak_and_egg
quantity_queso = max_cotixan_queso - queso
#psuedocode
steakandegg.quantity_remaining = quantity_steak_and_egg
queso.quantity_remaining = quantity_queso
HTML:
{% for item in food %}
<div id="food_set">
<img src="{{item.photo_menu.url}}" alt="" id="thumbnail photo" />
<div style='overflow:hidden'>
<p id="food_name">{{item.name}}</p>
<p id="price">${{item.price}}</p>
</div>
<p id="food_restaurant">By {{item.restaurant}}</p>
<div id="food_footer">
<img src="{{MEDIA_URL}}/images/order_dots.png" alt="" id="order_dots" />
<a id ="order_button" href="{{item.slug}}"></a>
<p id="quantity_remaining">{{item.quantity_remaining}} left</p>
</div><!-- end food_footer-->
</div><!-- end food_set-->
I don't understand what "faster Internet" or "using the same variable" have to do with anything here (or, indeed, what it has to do with sqlite particularly).
This question is about a fundamental property of web apps: that they are request/response based. That is, the client makes a request, and the server replies with a response, which represents the status of the data at that time. There's simply no getting around that: you can make it more dynamic, by using Ajax to update the page after the initial load, which is what StackOverflow does to show update messages while you're on the page. But even then, there's still a delay.
(I should note that there are ways of doing real-time updates, but they're complicated, and almost certainly overkill for a college food-ordering website.)
Now the issue is, why does this matter? It shouldn't. The user sees a page saying there is 1 burrito left - perhaps with a red warning saying "order quickly! almost gone!" - and they press the order button. On submission of that order, your code presumably checks for the actual status at that time. And, guess what, in the meantime you've processed another order and the burrito has already gone. So what? You simply show a message to the user, "sorry, it's gone, try something else". Anyone with any experience ordering things on the web - say, concert tickets - will understand what's happened.