Page navigation via embedded html5 object

  • Resolved psyskip3

    (@psyskip3)


    9 years, 10 months ago

    I am currently attempting to create a portfolio site that includes some stylish animations to better sell my animation skills. Unfortunately getting those animations integrated into my site is proving tricky, especially with my lack of coding knowledge.

    Currently I’m using the “Bones” theme and have been trying to use a HTML5 object (created in adobe animate) as a header with links to my sites pages. Here’s how I embedded the object into the banner (line 9):

    </head>

	<body <?php body_class(); ?> itemscope itemtype="http://schema.org/WebPage">

		<div id="container">

			<header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader">

				<div id="inner-header" class="wrap cf">

					<p id="logo" class="h1" itemscope itemtype="http://schema.org/Organization"><a href="<?php echo home_url(); ?>" rel="nofollow"><object class="movie" data="http://psyskip.com/wp-content/uploads/2016/07/banner_buttons2.html" width="1280" height="300"></object></a></p>

					<?php // if you'd like to use the site description you can un-comment it below ?>
					<?php // bloginfo('description'); ?>

				<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
						<?php wp_nav_menu(array(
    					         'container' => false,                           // remove nav container
    					         'container_class' => 'menu cf',                 // class of container (should you choose to use it)
    					         'menu' => __( 'The Main Menu', 'bonestheme' ),  // nav name
    					         'menu_class' => 'nav top-nav cf',               // adding custom nav class
    					         'theme_location' => 'main-nav',                 // where it's located in the theme
    					         'before' => '',                                 // before the menu
        			               'after' => '',                                  // after the menu
        			               'link_before' => '',                            // before each link
        			               'link_after' => '',                             // after each link
        			               'depth' => 0,                                   // limit the depth of the nav
    					         'fallback_cb' => ''                             // fallback function (if there is one)
						)); ?>

					</nav>

				</div>

			</header>

    And here’s my site if you want to see it in action: http://psyskip.com

    The site is a complete mess at the moment and the only link for the HTML object that I rigged up properly is the “home” button, but the concept of having the navigation links integrated into the banner media (which will include animation) is the goal for my final site.

    The link (which is a simple javascript: ‘window.location.href = ‘…’ works when accessing the page from outside, but when it is embedded into the banner it opens up the whole page within the banner space.

    So my question is; how would I go about fixing this so that I can have a custom HTML5 object that handles the site navigation?

    Of course feel free to explain why this is a dumb or inefficient way of making a customized header. I’m very new to website creation and have so far been slamming code against the wall to see what sticks, so if there’s an alternative approach to get a similar result then I’d love to hear it!

Viewing 1 replies (of 1 total)
  • Thread Starter psyskip3

    (@psyskip3)

    9 years, 10 months ago

    Thanks for all the help guys! 😐

    Well I can’t really be too angry for no one touching this; question’s all over the place and it certainly isn’t a typical wordpress thing.

    After a few more days of looking I did find a way to get my flash file’s html5 export into the banner with working links with the use of the ‘include’ command, although I needed to enable the command in my server’s ‘php.ini’.

    Seems easy enough, but it certainly would have been nice if someone had pointed me to it.

Viewing 1 replies (of 1 total)

The topic ‘Page navigation via embedded html5 object’ is closed to new replies.