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).
Related
I am currently am trying to get this below function working. I would like to use a relative path in order to add an active class for my different ul li a tag in my dom. The problem I am facing is that despite splitting the URL, it doesn't appear to be checking and comparing right part of the url and href. here is an of my HTML structure:
<div class="parent-bar"> <ul> <li>
<a class="parent-link" href="/dummy-parent-2/">
<div class="wrap">
<span class="text">Parent page 2
</span>
</div> </a> <div id="child-menu-1" class="child-menu">
<ul>
<li>
<a href="/dummy-parent-2/dummy-child-1/" class="child-links">
<div class="wrap">
<span class="text">child page 1
</span>
</div>
</a>
</li>
</ul> </div> </li> </ul> </div>
and here is the jQuery supposed to be tracking the url:
jQuery(function($) {
var path = window.location.href;
path = path.split("/");
$(".parent-link").each(function() {
if (this.href === path[3]) {
$(this).addClass('active');
}
});
if($('.parent-link').hasClass('active')){
$('.child-links').addClass('active');
}
});
The console is not showing any errors. I can see the active class is not added. The reason I am looking to do this is to allow the children of the parent items to be active as well. I will apply the same principle to the children to track the parent's respective URL. if that makes sense.
Any help or insight would be much appreciated.
I'm learning the basics of Bootstrap and I'm stuck when it comes to creating margins. I want to give space between the quote and the thumbnails. I've looked up tutorials and even searched Stack overflow and haven't found a solution. It's as if all the elements are stuck together. Can someone please tell me what I need to do to create a margin? Thanks in advance.
<div>
<h1 class = 'text-center'> Bob Dylan </h1>
<img width = '80%' class = 'img-responsive center-block' src ="http://www.billboard.com/files/media/bob-dylan-portrait-bw-1966-billboard-1548.jpg" alt = 'Bob Dylan'></img>
<h3 class = "text-center">". . . he not busy being born is busy dying."</h3>
</div>
<div class = 'row'>
<div class="col-xs-2">
<img width = "100%" src = 'https://upload.wikimedia.org/wikipedia/en/thumb/6/60/Bob_Dylan_-_Bob_Dylan.gif/220px-Bob_Dylan_-_Bob_Dylan.gif'>
<p class = 'center-block'> 1962 </p>
</div>
https://codepen.io/jwdwsn/pen/awaGdv
To solve this, instead create a new class "bottom-margin" that adds the standard margin that you need.
.bottom-margin { margin-bottom:30px; }
Then add a div after the quote div as below
<div class = "row bottom-margin">
<div class = "col-md-12">
</div>
</div>
I tried it works.
Hope this helps.
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.
Im trying to make a site compatible with IE8. It all looks good save one image not scaling. Any suggestions for a possible fix? Heres the appropriate code. The large picture is the one giving me issues
<div class = 'picture-container' id = 'pc1'>
<div class = 'large-picture' id = 'lp1'>
<figure style = 'float:left;max-width:45%;height:auto'>
<img src = 'make-up_artist_dupontstudios.png' width = '100%' height = '100%' class = 'no-mobile'>
<figcaption class = 'red-cap'>Our Set-Up</figcaption>
</figure>
<div class = 'picture-content'>
<div class = 'picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
<div class = 'picture-text'>We built a boutique full service production studio that allows for
one, two and three person filmed interviews and conversations.
We have studio lights, a three camera set-up and remote
monitoring. Additionally, our Infinity Wall creates a clean and
professional look that allows the film to be about the message.</div>
<div class = 'small-picture'>
<img src = 'hair_and_makeup_dupontstudios.png' width = '175' height = '100'>
</div>
<div class = 'small-picture'>
<img src = 'infinity_wall_dupontstudios.png' width = '175' height = '100'>
</div>
</div>
</div>
</div>
Given the following html structure:
<ul>
<li id = "li1" onclick="click('...');">
<div class="card-container">
<div class="card">
<div class="front">
<img class = "track_image" src="..." />
<div class = "track_title">title</div>
<div class = "artist_name">name</div>
<div class = "release_date">date</div>
<a class = "visit_website_anchor" href="..."><img id = "visit_website" data-displayed="yes" src=.../></a>
</div>
<div class="back" data-displayed = "no">
<img class = "track_image" src=... />
<div class = "audio_controls">
<audio controls></audio>
</div>
</div>
</div>
</div>
</li>
</ul>
Then if I click anywhere on the list item apart from the images then it gets displayed in a dimmed state, I'm not adding this so the browser is adding it. However if I click on the track_image class the list item does not get dimmed.
Why does it do it for the other items but not for this one?
The parent <LI> element has an onClick handler which will change the behaviour of it when a user clicks it in webkit browsers, try applying the following style to it:
-webkit-tap-highlight-color: rgba(0,0,0,0);
From Apple Developer library:
"Overrides the highlight color shown when the user taps a link or a
JavaScript clickable element in Safari on iPhone.
This property obeys the alpha value, if specified. If you don’t
specify an alpha value, Safari on iPhone applies a default alpha value
to the color. To disable tap highlighting, set the alpha value to 0
(invisible). If you set the alpha value to 1.0 (opaque), the element
is not visible when tapped."