I have a problem with my page:
http://dennisadelmann.de/New/index.html
when my index page is loading, the Name (header) is jumping.
i think its because of the simpleweather plugin. but i couldnt find a solution
Here are the code of my header: (let me know if you need more of the code)
<div id="fadeMenu">
<ul class="navscroll">
<li>work</li>
<li>journal</li>
<li>contact</li>
</ul>
</div>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<header>
<nav>
work
journal
contact
</nav>
<div id="weather"></div>
<div id="name">
<h1>DENNIS ADELMANN</h1>
<p>communication design</p>
</div>
</header>
Thank you!!!!
You're right, it seems like it's because of the weather plugin.
To fix it you need to either make height:fixed where the weather appears (so changing the content doesn't matter)
OR
You could add some default content to the area when it's made that is later changed once the plugin is ran, something like a fallback inside the element tags: "The weather plugin is blocked. Please allow third party plugins on your browser."
Related
I have a piece of markup where when a user clicks on "find a rider" the browser is supposed to take the user down to where the participants are on the same page. But when clicking the link it just takes me to a page not found on chrome, edge, and firefox (can't test safari).
<div class="container-fluid blue">
<div class="container text-center">
<h1 class="white">Prairie Women on Snowmobiles</h1>
Find a Rider
<div class="row">
<div class="col-lg-12" style="margin-bottom: 15px;">
<div class="hero elevation-z12" style="background-image: url('../images/content/pagebuilder/PWOS_banner.jpg');"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Prairie Women on Snowmobiles</h2>
<p>A non-profit organization whose annual missions are provincial awareness events that are designed to focus attention on breast cancer and the recreation of snowmobiling as well as raise the much-needed funds for breast cancer research. Over the past 18 years we have raised almost $2.5 million for the cause. To learn more about Prairie Women on Snowmobiles click here.</p>
</div>
</div>
<div class="container">
<div class="text-center">
<h2>Riders</h2>
<p>Meet our 2020 Riders</p>
</div>
<div class="events">
<div class="event-display" id="find">
[[S51:PWOS_SK_reus_riders]]
</div>
</div>
</div>
</div>
normally to fix this I would just put the url in the link "../site/SPageServer/?pagename=PWOS_SK_homepage#find" and that works, however, doing that will break my url tracking if people land on the page using the vanity url.
Here's a link to the page:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage
any help is appreciated.
thanks,
Your page starts with <base href="https://secure2.convio.net/cco/site/" /> so when you click on href="#find" it resolves to https://secure2.convio.net/cco/site/#find.
You need to write your URL relative to the base URL, not the current page.
As mentioned in a comment, it would be better to do this with simple JS instead of playing with browser functionality. Without touching the HTML and assuming you have jQuery on the site, I would add something like the following in a script tag (obviously below both the <a href='#find'> and div#find)
jQuery("a[href='#find']").click(function() {
event.preventDefault();
jQuery("body, html").animate({
scrollTop: jQuery("#find").offset().top
});
})
This allows you to stay on the page without linking away/messing up tracking data while the window will scroll to the proper element no matter how far down. Hope this helps (even though you managed it before me ;) )
When you hover the mouse over the link you see:
https://secure2.convio.net/cco/site/#find
but you expect:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage#find
This is caused by the tag in the header.
I wrote some custom HTML code in my Wikidot article - instead of the "original" Wikidot syntax, I have to use <a href="/page"> for links.
The content of my custom HTML block is like this:
<section class="intro">
<div class="container">
<h1>Headline-line text</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>Time value </time> Text. Link here.
</div>
</li>
</ul>
</section>
The problem is that it loads the entire content of the HTML into that carefully selected small portion of the original site.
I can only assume that it has something to do with <div>s, as I've already seen this issue on other sites. Hence my assumption is that there must be a general source of this issue, and this is why I'm asking.
What's the reason of this problem and how can I avoid it?
I have divided my page into 2 halves. Now I have few links in my left sidebar.I want to call the content of the links on my right sidebar without loading my page again.
<div class="container">
<div class="row">
<div class="col-md-2 sidebarleft">
<br>
<ul class="nav nav-stacked">
<li>BookMarks</li>
<li>Cards</li>
<li>Desk Organiser</li>
</ul>
</div>
<div class="col-md-10 sidebarright">
<div class="div2">
</div>
<div class="div3">
</div>
</div>
</div>
I think what you want to look into is Ajax. This can be achieved in multiple ways, but one of the most common methods is with Ajax in Jquery.
Jquery has a nice wrapper function load, this should do everything that you need.
$("a").click(function(e) {
$(".div2").load($(this).attr("href"));
e.preventDefault();
});
You're going to have to use either Frames, IFrames, or AJAX.
Frames - Not in HTML5 so not a good option.
IFrame - Forward Compatible but clunky.
AJAX - Probably your best bet but not for the faint of heart.
I got this part of code:
<div id="main">
<div class="wrapper clearfix" id="content">
<section class="clearfix">
<article id="market_data" ng-app="eex.market_data" data-src="/blueprint/" data-config="/json/en/20776/content.json?config=" class="ng-cloak">
<div id="content">
<div market-data-page-title></div>
<div market-data-datepicker></div>
<div ng-view></div>
</div>
</article>
</section>
</div>
Where some data is retrieved using json, which makes the final HTML invisible to me, talking about code. I need to get some data that is drawed on the HTML using VB.NET, so I download the whole file and search for what I need but it isn't there.
Is there a way to catch this information?? I thought maybe using some Chrome extension where I can see all the transfers through TCP, I remember using one but can't recall the name now!!
Thanks a lot
Ricardo
newbie self learning web design. In theory, I've learned html and css. In practice I've hit a snag. Here is the barebones code so far.
<header>
<a id="site-logo" href="/"><img src="#" alt="Dot Design" /></a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<form id="search">
<input type="search" placeholder="Search" />
</form>
</header>
<div id="content>
<!-- content goes here -->
</div>
Here is the template I'm referencing for practice: http://min.us/i/braxZb11KQjfD
The problem is I'm not quite sure if:
everything in the red box should go in the header
only the jquery slider should go in the header
everything in the red box should not be in the header
or it doesn't matter and just a matter of preference
Since I have no experience, I'd like some feedback as to which method is correct? Or more generally accepted and preferred?
Thank you very much for your input.
Everything in the red box should not be in the header unless that content describes the page content. Which at this point it does't look like it does. It's just homepage content. Unless the intro is directly related to the slider there's no reason to combine the two.
<header></header>
<div id="content">
<figure class="hero"></figure>
<p class="lead"></p>
...
</div>
Would work fine as a setup. The HTML offers a way to group elements semantically (for instance the section and header) or to provide hooks for styling (#content and .hero etc).