I am using bootstrap framework.
<div class="container">
<h1>Menu</h1>
<div class="row">
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
</div>
</div> <!-- /container -->
Whitespace on the left and right sides of the images are also clickable - looks like .center-block is the culprit. How to solve?
A block spans the entire div, and centers by using margin. As a link, I would suggest instead removing the center-block from the images themselves, creating a class:
.center {
text-align: center;
}
and setting that class on the containing div, in your case:
<div class="col-md-4 center">
Or something similiar.
Also I would suggest placing your text description for each image into a div, since without the image being a block, the text would flow next to it. Simply placing the text in a paragraph tag would suffice.
Here is a jsbin to demonstrate:
http://jsbin.com/zamavoha/1/edit
Related
I'm using SpringBoot MVC,
I have a Thymeleaf forloop going on. and i'm trying to figure out the correct output.
I have these divs with a class box. The Class box is what needs to be repeated over and over for each blog post.
i'm just stuck on where to put the div with class box at inside the forloop
<div style="align-items: center" th:each="blogPosts : ${BlogPosts}">
<h3 style="align-items: center" th:text="${blogPosts.title}"></h3>
<p style="align-items: center" th:text="${blogPosts.description}"><p/>
<div class="box" style="width:100%">
<div class="glass"></div>
<div class="content" style="padding:0; margin:0;">
</div>
</div>
Okay So It looks like I figured it out, sorry guys.
I'm new to thymeleaf. "th:each" will be taking over the current div and repeating the current div.
<div class="box" style="width:100%" th:each="blogPosts : ${BlogPosts}">
<div class="glass" th:text="${blogPosts.title}"></div>
<div class="content" style="padding:0; margin:0;" th:text="${blogPosts.description}">
</div>
</div>
I was in a hecktic moment asking this question.
If you find this page and have similar thinking. Let me explain my code
'th:each="blogPost : ${BlogPosts}"'
here we have two parameters. parameter 1 blogPost, is what thymeleaf is going to look for within your block. The second parameter is '${BlogPosts}' this is the variable we are grabbing from in our controller.
Thanks
'
<p style="align-items: center" th:text="${blogPosts.description}"><p/>
<div class="box" style="width:100%">
<div class="glass"></div>
<div class="content" style="padding:0; margin:0;">
</div>
</div>
'
I am trying to scrape multiple elements with the same class names but each has a different number of children. I am looking for a way to select specific elements using the xpath(this would make it easiest for my loop).
const gameTimeElement = await page.$$('//*[#id="section-content"]/div[2]/div[1]/div/div['+ i + ']');
const gameTimeString = await gameTimeElement[j].$eval('h3', (h3) => h3.innerHTML);
This currently does not work.
After I select the element, I grab the h3 tag inside and evaluate it to get the innerHTML.
Is there a way to do this utilizing xpath?
<div id="section-content" style="display: block;">
</div>
<div class="matches">
<div class="day day-28-1" data-week="1" style="display: block;">
<h4>Sat, March 28, 2020</h4>
<div class="day-wrap">
<div class="match region-7-57d5ab4-9qs98v" data-week="1">
<h3 class="time">2:00PM
<span>(Central Daylight Time)</span>
<span class="fr">Best of 7</span>
</h3>
<div class="row ac ">
<div class="col-xs-3 ar">
<img class="team-logo" src="url"></div>
<div class="col-xs-2 al">
<h4 class="loss">(NA)<br>
<span class="team-name">Team1</span>
<br>
<span class="win spoiler-wrap">0</span>
</h4>
</div>
<div class="col-xs-2">
<img class="league-logo" src="url">
<h4> V.S.</h4>
</div>
<div class="col-xs-2 ar">
<h4 class="">(NA)<br>
<span class="team-name">Team2</span>
<br>
<span class="win spoiler-wrap">4</span>
</h4>
</div>
This is a sample of what I am working with for HTML on the website.
Yes, div class="day-wrap" could have a different number of childs. But I don't think that's a problem.
You want to get game times of all Rocket League matches. As you've noticed, games times are located within h3 elements. You can access it directly with one of the following XPaths :
//div[#id="section-content"]//h3
//div[#class="day-wrap"]//h3
//div[contains(#class,"match region")]//h3
If you want something for a loop then you can try :
(//div[#class="day-wrap"]//h3)[i]
where i is the number to increment (from 1 to x).
Side notes : your sample data looks incorrect (according to your XPath). You have a closing div line 2 and it seems you omit div class="row middle-xs center-xs weeks" before div class="matches".
<ion-side-menu side="left">
<ion-content>
<div class="list card">
<a menu-close href="#/app/account" class="item item-avatar">
<img src="{{user.detail.avatarUrl}}" on-error-src="img/avatar.jpg">
<h2>{{user.detail.nickname}}</h2>
<p>{{user.attributes.username}}</p>
</a>
</div>
<ion-list>
<ion-item menu-close href="#/login">
登陆
</ion-item>
</ion-list>
<div class="card">
<div class="item item-image">
<img alt="个人信息" src="img/wudics.jpg">
</div>
<div class="item item-image">
<p>扫描二维码下载APP版</p>
</div>
</div>
</ion-content>
I have set the alt tag inside img tag, but this is not working. I want to implement that it can show a tip when my mouse hover on the image.
how to do that? please help.
From what I know alt tag was not intended to be used in this way being alternative text if the image can not be displayed or if read using text to speech software for blind people.
Try the title attribute for additional information about the image.
example title="your text"
Not sure why it's not displaying though.
I have images placed in my website using the < img> tag. When the website is scaled to a smaller screen the images hang over the container. Why are they not scaling with the the rest of the site? Any fixes?
<div class="container">
<div class="col-md-12">
<div class="col-md-4 padtop">
<img src="img/WDadd.png" alt="" />
</div>
</div>
</div>
I dont know if this is the right way to do it, but it seems to be working for me you could try to add, give it the class thumbnail on the image, and if you dont like the look of thumbnail you can always edit it in your css file
example: http://jsfiddle.net/abnH6/6/
<div class="container">
<div class="col-md-12">
<div class="col-md-4 padtop">
<img src="http://lorempixel.com/500/500/" alt="" class="thumbnail"/>
</div>
</div>
</div>
The following FIDDLE shows my current markup.
HTML
<div class="popup-inner-content main-content">
<div class="inner-section one">
<!-- images -->
<div class="media pull-left">
<img src="#" />
</div>
<!-- text -->
<div class="media-aside pull-right">
<h4>Head</h4>
<p>Body</p>
</div>
</div>
<div class="inner-section three is-hidden">
<!-- images -->
<div class="media pull-left">
<img src="#" />
</div>
<!-- text -->
<div class="media-aside pull-right is-hidden">
<h4>Head</h4>
<p>Body</p>
</div>
</div>
<div class="inner-section two is-hidden">
<!-- images -->
<div class="media pull-left ">
<img src="#" />
</div>
<!-- text -->
<div class="media-aside pull-right">
<h4>Head</h4>
<p>Body</p>
</div>
</div>
<div class="thumbnail pull-left">
<!-- thumbnail -->
<div class="media-thumb one">
<img src="#" alt="media-thumbnail" title="media-thumbnail" />
<p>Anchot text</p>
</div>
</div>
<div class="thumbnail pull-left">
<!-- thumbnail -->
<div class="media-thumb two pull-left">
<img src="#" alt="media-thumbnail" title="media-thumbnail" />
<p>Anchor text</p>
</div>
</div>
<div class="thumbnail is-hidden">
<!-- thumbnail -->
<div class="media-thumb three ">
<img src="#" width="128" height="69" alt="media-thumbnail" title="media-thumbnail" />
<p>Anchor Text</p>
</div>
</div>
</div>
</div>
What I am trying to do is always have two thumbnails divs and only one of the inner-section divs visible at a time and essentially be able to toggle through the inner-section and thumbnail divs when clicking any of the anchors inside the thumbnail div.
How could I achieve this using jquery?
Use this:
http://jsfiddle.net/nHXEs/6/
function displayItem(showItem) {
$('div.thumbnail').show();
$('div.thumbnail .' + showItem).parent().hide();
$('div.inner-section').hide();
$('div.inner-section').filter('.' + showItem).show();
}
$(document).ready(function() {
displayItem('one');
$('div.thumbnail').click(function () {
var showItem = '';
if ($('.media-thumb', $(this)).hasClass('one')) {
showItem = 'one';
} else if ($('.media-thumb', $(this)).hasClass('two')) {
showItem = 'two';
} else {
showItem = 'three';
}
displayItem(showItem);
});
});
Hoply it is what you are looking for.
But i hope so.
It is not the best solution, because you use classes to identify your items, but if you allltimes have exactly 3 thumps and big elements it works.
A better solution will be to uses id`s to identify elements
<div class="thumbnail" id="thump_three">
You haven't explained the logic of how to decide which two thumbnails you want to show but here is a good starting point of what I believe you mean by toggle through which should allow you to expand on it. This would show just one of each element.
The idea is that the JS doesn't need to know about 'one', 'two', 'three' etc and just work for an infinite amount of options.
<p>Anchor text</p>
Give the anchor a reference you can use because finding the classes then working out which will be 'one, 'two', 'three', etc will be a lot more work.
You can do this in a few lines but I've made it obvious what's going on.
$('.thumbnail a').on('click', function(e){
e.preventDefault();
// find the wrapper (.thumbnail) and hide it
var $wrapper=$(this).closest('.thumbnail');
$wrapper.hide();
// find the next one
var $next=$wrapper.next();
// if this was the last one get the first instead
if (!$next.length) $next=$wrapper.siblings().filter(':first');
// show it
$next.show();
// now deal with the element that's elsewhere
var ref=this.href.replace('#','');
$('.inner-section.' + ref).show().siblings().hide();
});
Once you've set this behavior up, to save yourself writing out code again (or needing to define functions) just trigger a click on an anchor in the last element so it makes the first one show.
$('.thumbnail:last a').trigger('click');