HELLO
Let's say I have an home page with 200 list items on it. each list item contain picture and 2 links.
one link go to a unique page that will show more details about the item
the second link go to the home page that display the 200 items.
what i am saying is that on the home page i will have 200 links leading to the home page again, making a crawler loop.
how bad is it?
should i prevent this for seo purposes?
www.mydomain.com/home-page/
---------------------------contain the follow
<div class = "item" id = "item1">
<img src = "/pictures/my_pictures/item1.jpg">
<a href = "www.mydomain.com/item1/">
<a href = "www.mydomain.com/home-page/">
</div>
<div class = "item" id = "item2">
<img src = "/pictures/my_pictures/item2.jpg">
<a href = "www.mydomain.com/item2/">
<a href = "www.mydomain.com/home-page/">
</div>
<div class = "item" id = "item3">
<img src = "/pictures/my_pictures/item3.jpg">
<a href = "www.mydomain.com/item3/">
<a href = "www.mydomain.com/home-page/">
</div>
.....197 more items
There is no issue regarding SEO here. No worry. Google does not care about internal links. You can do what you want.
Related
Okay .. I want to create a button once it's clicked it allows you to add a photo .. like the input tag of attribute type = "file" .. I've already designed the button shape .. all what is remained is to click on it so a window blows up .. and choose a photo to display in the post box ..
enter image description here
<div class="extras">
<ul class="icons">
<li class="photos">
<i class="fa-solid fa-image">
</i>
</li>
<li class="tag"> <i class="fa-solid fa-user-tag"> </i> </li>
</ul>
<div class="button">
<button>launch</button>
</div>
</div>
here is the element of class photos which I want it to display the window of adding a photo once it's clicked .. exactly like .. just different button style ..
If I understand well, what you have to do is this: first you'll need to add an id to your <li class="photos"> and your <button>launch</button>. And also remove your <i id="up"> component since you'll add it with JavaScript. See the html bellow.
<div class="extras">
<ul class="icons">
<li id="photos-component" class="photos">
<!-- there used to be an <i> tag here! -->
</li>
<li class="tag">
<i class="fa-solid fa-user-tag"> </i>
</li>
</ul>
<div class="button">
<button id="launch-button">launch</button>
</div>
</div>
After adding the ids, you'll need to call a JavaScript file by inserting a <script src="insert-your-file-name.js"></script> at the bottom of your <body>. Probably, you already have done this. If not, do it.
In that file, you'll want to add the following code.
// This constant bellow contains your photos component
const photosComponent = document.getElementById("photos-component");
// This constant bellow contains your launch button
const button = document.getElementById("launch-button");
// This whole chunk of code bellow is a function that will run whenever
// you click the button
button.addEventListener("click", () => {
// Here we create a new empty <input> tag
const fileInput = document.createElement("input");
// Here we add all the attributes for the <input> tag
fileInput.id = "up";
fileInput.type = "file";
fileInput.classList.add("fa-solid fa-image");
// Here we add the input to the photos component
photosComponent.append(fileInput);
// Here we change the style of the button
button.classList.add("insert-button-style");
})
Hopefully it helps. You can always read more about the JavaScript HTML DOM (Document Object Model) by googleing it.
These links might help you in your search:
https://www.w3schools.com/js/js_htmldom.asp
https://www.javascripttutorial.net/javascript-dom/
I have been trying to fetch user comment on a blog post. The tag between which the comments lie is <div id='loadComment> ..... </div>.
So when I tried to view it through soap.prettify(), I only found <div id='loadComment> </div>. The codes in between were not displaying.
Below is the real code which I should be able to see as output
<div id = "loadComment">
<div>
<div class = "comm-cont">
<a href = "...">
................
<a class = ....> ... </a>
</a>
</div>
</div>
But the output I get using prettify() is
<div id = 'loadComment'>
</div>
I would want to fetch comments but I am not even able to view them through BeutifulSoup. Thereby, I need help from the community. Thank you in advance.
Edit:
url:
https://www.somewhereinblog.net/blog/nibhrita/30292259
I have a url with the following html part
<div class="shop cf">
<a class="shop-logo js-shop-logo" href="/m/3870/GMobile">
<noscript>
<img alt="GMobile" class="js-lazy" data-src="//a.scdn.gr/ds/shops/logos/3870/mid_20160920155600_71ff515d.jpeg" src="//a.scdn.gr/ds/shops/logos/3870/mid_20160920155600_71ff515d.jpeg" />
</noscript>
<img alt="GMobile" class="js-lazy" data-src="//a.scdn.gr/ds/shops/logos/3870/mid_20160920155600_71ff515d.jpeg" src="//c.scdn.gr/assets/transparent-325472601571f31e1bf00674c368d335.gif" />
</a>
</div>
I want to get the first img alt inside the div class shop cf and I do
Set seller = Doc.querySelectorAll("img")
wks.Cells(i, "D").Value = seller.getAttribute("alt").Content(0)
I get nothing what I forget to include?!?
Can I get it from
<noscript>
tag?
I tried the following as well
Set seller = Doc.getElementsByClassName("js-lazy")
wks.Cells(i, "D").Value = seller.getAttribute("alt")
Use element with attribute selector
CSS:
img[alt]
VBA:
ie.document.querySelector("img[alt]")
You may need to add
ie.document.querySelector("img[alt]").getAttribute("alt")
To include the class use
ie.document.querySelector("img.js-lazy[alt]")
If more than one element then use querySelectorAll and index into returned nodeList e.g.
Set list = ie.document.querySelectorAll("img.js-lazy[alt]")
list.item(0).getAttribute('alt')
list.item(1).getAttribute('alt')
have you try this way?
let lazy1 = document.querySelectorAll(".js-lazy")[0]
let lazyalt = lazy1.getAttribute("alt");
let shop = document.querySelector('.shop');
shop.classList.add(lazyalt);
console.log(lazyalt)
Pretty straight forward.
When I zoom in on my page, the divs and such don't expand to fit the document but on the original website i'm imitating it does. How does their code differ? What code are they using to do the trick.
Mine: http://socialvender.com/danielbrown
Theirs: http://gunbi.net/
Just hold CTRL and Zoom In.
Can someone help me out?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id = "container" />
<div class = "banner" />
<h4>Gundi!</h4>
<div id = "divider-p">
<div class = "seperators"><span></span></div>
<div id = "networks">
<!-- <div id = "facebook"><img src = "images/fb.svg" width = "24"></div>
<div id = "twitter"><img src = "images/twitter.svg" width = "24"></div>
<div id = "tumblr"><img src = "images/tumblr.svg" width = "24"></div> -->
</div>
</div>
</div>
<div id = "navigation">
<ul>
<li>
<a>
Home
</a>
</li>
<li>
<a>
Ranking
</a>
</li>
<li>
<a>
Support
</a>
</li>
<li>
<a>
Media
</a>
</li>
<li>
<a>
Store
</a>
</li>
<li>
<a>
Forum
</a>
</li>
</ul>
</div>
<div id = "players-online">
<div class = "amount">
<span>0 people are playing | server online</span>
</div>
</div>
</div>
<div class = "row">
<div class = "col-8 content">
<section id = "register">
<div class = "game">
<button id = "game-start" class = "col-2">Game Start</button>
<!-- <br><button id = "download" class = "blue">Download</button>
<button id = "register" class = "blue">Register</button> -->
</div>
</section>
</div>
</div>
</body>
</html>
Full Code Here: https://jsfiddle.net/yayyjL14/
I see two problems with your site:
One, the navbar is not responsive because you haven't put it in a responsive container, as there is no fluid measurement (i.e.: percentages) for the width. I would recommend learning Bootstrap, a CSS/Javascript framework. Just the grid system alone (built on CSS) , would enable you to save a considerable amount of time building responsive containers that allow you to dynamically size your content depending on the size of the browser. You can download Bootstrap at: http://getbootstrap.com/ and learn the grid from: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Another problem I see is that there is no width assigned to the button, and thus it is prone to changing width. I would set the width to a px, just so it does not resize, and stays a certain width, as there as no point on a mobile device to have a button that is too small (generally stays the same size on both desktop and mobile, although you may alter this via media queries).
I have the following code:
<a id="outer-anchor" href="/test">
text in anchor
<a id="inner-anchor" href="/test2" style="display:none"></a>
</a>
I tried this in different browsers and the inner-anchor drops out of the outer-anchor in every browser. So it gets rendered as this:
<a id="outer-anchor" href="/test">
text in anchor
</a>
<a id="inner-anchor" href="/test2" style="display:none"></a>
Does someone know why and how to fix this?
Thanks in advance
You can't house anchor tags inside anchor tags.
This would move the childNode out of the outer-anchor to be it's sibling after it, and then hide it nicely;
JSfiddle
HTML
<div id="parent-placeholder">
<a id="outer-anchor" href="/test">
text in anchor
<a id="inner-anchor" href="/test2" style="display:none"></a>
</a>
</div>
JavaScript
var outer = document.getElementById('outer-anchor');
var inner = outer.nextSibling;
inner.style.display = 'none';
inner.parentNode.removeChild(inner);
outer.parentNode.appendChild(inner);
Output
<div id="parent-placeholder">
<a id="outer-anchor" href="/test">text in anchor</a>
<a id="inner-anchor" href="/test2" style="display: none;"></a>
</div>
parent-placeholder div purely exists to show how to relate to the parent DOM-element where the anchors are in.