Posts

Showing posts with the label twitter-bootstrap-3

how to make it more responsive this page specially on iphone?

Image
Clash Royale CLAN TAG #URR8PPP how to make it more responsive this page specially on iphone? <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <title>bootstrap</title> <style> </style> </head> <body> <div class="container"> <div class="row"> <div class="row"> <div class="col-xs-12"> <div class="row"> <div class="col-xs-12"...
-
Read more

Add more than one “Read More” link in a paragraph (readmore.js)

Image
Clash Royale CLAN TAG #URR8PPP Add more than one “Read More” link in a paragraph (readmore.js) I am using readmore.js and I would like to expand my paragraph twice. For now I am using one expand link with a value of 'More information' that shows all the text when clicked. There is another link in the bottom with a value of 'Less information' that hides the text when clicked: This is some text and continues for ages... <a href="#">More information</a> This is some text and continues for ages... but is not as long as you think. <a href="#">Less information</a> I would like to add another expand link called 'Even more information'. In this situation 'More information' would only show a part of the text while 'Even more information' would show the complete text. This would look something like this: This is some text and continues for ages... <a href="#">More information</a> This is som...
-
Read more

How can I create an expanding search box in Bootstrap, Drupal 8?

Image
Clash Royale CLAN TAG #URR8PPP How can I create an expanding search box in Bootstrap, Drupal 8? I'm trying to make my search box expand upon clicking the search icon and submit when clicked again. My search block markup currently looks like this: <div class="search-block-form contextual-region block block-search block-search-form-block" data-drupal-selector="search-block-form" id="block-mytheme-search" role="search"> <h2 class="visually-hidden">Search</h2> <div data-contextual-id="block:block=mytheme_search:langcode=en" class="contextual" role="form"> <button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open Search configuration options</button> </div> <form action="/search/node" method="get" id="search-block-form" accept-charset="UTF-8...
-
Read more

How to collapse a bootstrap navbar programmatically

Image
Clash Royale CLAN TAG #URR8PPP How to collapse a bootstrap navbar programmatically I'm trying to build a website using bootstrap which contains a navbar. The mobile site looks pretty good until you try to change the websites content using the navbar. If you click it, the content changes, but the navbar stays expanded. When you try closing it manually, the content disappears and the initial content shows up. HTML: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header" id="mainpage"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> ... <li id="examplenav"><a href="#">Example</a></li> JS: $("examplenav").addEventListener("click", showExampleContent); showExampleContent is a function that changes a div using dom scripting. ...
-
Read more