This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 11 years ago.
Building the site out at http://nelsonkeating.com/
When hovering over an image you will see 3 actions appear. How can I remove these, and instead just display the title of the page when the user hovers (the title is currently right below the image)
*This is a wordpress site.
Thanks!
The outputted HTML looks like this (after a lot of output cleanup):
<div class="img-container">
<img width="310" height="206" src="http://nelsonkeating.com/wp-content/uploads/2012/01/whit-and-me-park-310x206.png" class="attachment-post-thumbnail wp-post-image" alt="whit and me park" title="whit and me park" />
<div class="actions">
Enlarge
<a class="share">Share</a>
<span>0</span> Comment
<div class="share-container">
<div class="share-icons">
Twitter
Facebook
StumbleUpon
Technorati
Digg
Delicious
Email
</div>
</div><!-- #share-container -->
</div><!-- #actions -->
<div class="clearfix"></div>
</div><!-- #img-container -->
<h2>What We Do</h2>
So, there are a few things to note here. The actions div looks like it is the one that is being displayed on hover. The <h2> is what you want to show. So, the hacky thing to do is to just put the <h2> generation inside the actions div and comment out (or remove) that code.
A better solution is to, in addition to that, dig through the jQuery and make sure you aren't breaking any of that code on hover. Also, since I can only guess this is a theme, there might be a few issues that crop up because of this. Themes are usually pretty tightly constructed (in my experience at least) and changing something can have a cascading effect.
IF you see your html for each of these containers it's in the form of:
<div class="img-container">
<img width="310" height="315" src="http://nelsonkeating.com/wp-content/uploads/2012/01/DW3-310x315.jpg" class="attachment-post-thumbnail wp-post-image" alt="D&W3" title="D&W3" />
<div class="actions">
Enlarge
<a class="share">Share</a>
<span>0</span> Comment
<div class="share-container">
<div class="share-icons">
<a href="javascript: void(0)" class="twitter-share iframe" onClick="twitPop('http://nelsonkeating.com/whitney-danielle/', 'Whitney & Danielle - ', 'sawyerh:Best Designer Alive')">
Twitter</a>
<a href="http://www.facebook.com/sharer.php?u=http://nelsonkeating.com/whitney-danielle/&t=Whitney & Danielle" class="facebook-share" target="_blank">
Facebook</a>
<a href="http://www.stumbleupon.com/submit?url=http://nelsonkeating.com/whitney-danielle/&title=Whitney & Danielle" class="stumble-share" target="_blank">
StumbleUpon</a>
<a href="http://technorati.com/cosmos/search.html?url=http://nelsonkeating.com/whitney-danielle/" class="tech-share" target="_blank">
Technorati</a>
<a href="http://digg.com/submit?phase=2&url=http://nelsonkeating.com/whitney-danielle/&title=Whitney & Danielle" class="digg-share" target="_blank">
Digg</a>
<a href="http://del.icio.us/post?url=http://nelsonkeating.com/whitney-danielle/&title=Whitney & Danielle" class="delicious-share" target="_blank">
Delicious</a>
<a href="mailto:EMAIL?body=http://nelsonkeating.com/whitney-danielle/" class="email-share" target="_blank">
Email</a>
</div>
</div><!-- #share-container -->
</div><!-- #actions -->
<div class="clearfix"></div>
</div><!-- #img-container -->
Without knowing how the script is exactly working i would suggest you modify the content inside the actions class which is revealed on hover
Related
I'm interested in solving this problem, since I can't figure out what to do. I made a fade in/out text under menu for mobile version to show some information, but since the code has to be between two HR lines I added the code to layout.php file, and now I can't put that on 3 other languages because it's on German.
<div class="">
<div class="">
<hr class="" />
<div class="" style="">
<div class="">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<hr class="" style="" />
</div>
</div>
This is the code for that fade In/Out effect and changing from one to another, I managed to do that with nth-child selector, nothing hard...
My web site has 4 languages, but every language has 2 web sites that are different. I'm not using any framework just bare code. I've tried searching for anything that would be connected to that HR line so I could add manually on every site another line and that text between them, but there is none because it uses layout.php to show that line.
<div id="" class="">
<? if ($special_fullscreen != true): ?>
<div id='' class="">
</div>
<div class="">
<div class="">
<hr class="" style="" />
<div class="" style="">
<div class="">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<hr class="" style="" />
</div>
</div>
<div class="">
<div class="">
</div>
</div>
So, I would like to hear an idea that would resolve this issue, like making a different layout.php for every language or something like that and how would that be possible. I know that this code probably doesn't have anything to do with the problem, but I'm in a hurry and just tried to copy at least something... Thanks in advance :D
I am completely not sure if I know what you mean but it may be helpful info.
If you want to include different files on the same page depended on language - you can set cookie with info about chosen language and then, based on that, load proper layout.php file for it.
You can also make all language versions in one layout.php file, include it in proper place and make if statement checking which content should get displayed (inside that layout.php file) - also based on value of COOKIE.
Instead of cookie, you can also use $_SESSION but that may not work on the way you really want (according to my understanding of your problem).
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
CLARIFICATION: Being that I've never used PHP, it was unclear how to format the PHP file, so that when you include it in the index, then header(nav bar) would show up. No posts explained why I had to change my index.html to index.php to make it work. And again, being that I haven't used PHP, I was under the impression that changing the extension meant that I would have to convert my HTML code to PHP commands. I was trying to avoid having to change my whole code around. That's where the confusion was.
I was going to delete the question once I got it figured out. Then again, I'm sure I'm not the only person that may run into this while making their first website.
SOLUTION. Save only the nav code in html language with a PHP extension (header.php). Change index/home file from .html to a .php extension (don't have to modify any code. but accepts the include prompt). Then, include the header.php in your index.php. Same goes for your footer. Thanks for the help everyone.
*ORIGINAL POST: Through another post, I was told it would be easier to use a nav/footer on multiple pages by using PHP.
I created a file and tried including it and it is not displaying. I'm not sure what I am doing wrong.
There is some CSS in my nav bar as well, do I need to import the css file in the PHP file? or does the index.html file automatically attach to the included (php) file.
PHP Code:
<?php
echo '<nav>
<div>
<a href="/">
<div id="logo"><img src="/Images/7serviceLOGOblue2.png" alt="Home"/></div>
<div id="headtag"><img src="/Images/title.png" alt="Home"/></div>
<div id="tagline"><img src="/Images/tag_line.png" alt="Home"/></div>
</a>
</div>
<div>
Home
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
</nav>';
?>
HTML Code (include):
<body>
<?php include '/header.php';?>
....other code....
</body>
If there's a problem with the PHP file, if I'm missing something, can someone show an explain please?
no need to add <?php ?> code in the header file just keep it as it is :
Create a new file named header.php and add this code to it
<nav>
<div>
<a href="/">
<div id="logo"><img src="/Images/7serviceLOGOblue2.png" alt="Home"/></div>
<div id="headtag"><img src="/Images/title.png" alt="Home"/></div>
<div id="tagline"><img src="/Images/tag_line.png" alt="Home"/></div>
</a>
</div>
<div>
Home
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
Include header.php anywhere you want
Remove the <?php tag from your code. As you generated html output. <?php tags are used to generate output by php.
<nav>
<div>
<a href="/">
<div id="logo"><img src="/Images/7serviceLOGOblue2.png" alt="Home"/></div>
<div id="headtag"><img src="/Images/title.png" alt="Home"/></div>
<div id="tagline"><img src="/Images/tag_line.png" alt="Home"/></div>
</a>
</div>
<div>
Home
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
</nav>
If you want to use php tags, than you have to write the code in this way:
<?php
echo '
<nav>
<div>
<a href="/">
<div id="logo"><img src="/Images/7serviceLOGOblue2.png" alt="Home"/></div>
<div id="headtag"><img src="/Images/title.png" alt="Home"/></div>
<div id="tagline"><img src="/Images/tag_line.png" alt="Home"/></div>
</a>
</div>
<div>
Home
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
</nav>
';
?>
Your problem is most likely the pathing of you include. Often you'd need to specify from the server root, and not just /header.php.
To specify your including-path, you could specify the root like this
include $_SERVER['DOCUMENT_ROOT']."/header.php";
You can also set the default include path in your php.ini file, thus making the $_SERVER['DOCUMENT_ROOT'] an automatic process, that can be done with running this code, that will alter your php.ini file.
ini_set('include_path', '/usr/lib/pear');
As others have pointed out, you don't need the contents of your /header.php to be echoed out as it's pure HTML. Anything that's included will be included the way it is, so having the contents of /header.php as pure HTML just makes for better practice, as it's easier to read.
I have a quite specific problem to solve today - I just can't get my head wrapped around it. Makes totally no sense for me...
It's about a live site: http://rawrockchick.com/#testimonial-slider
If you scroll down to the testimonials on the home page (the link above should bring you there) you'll see that the slider arrows are missing. For a reason I can't figure out the URL is prepended a couple of times before the image src:
<img src="http://rawrockchick.comhttp://rawrockchick.comhttp://rawrockchick.com/media/manual/slider-arrow-left.png">
This wasn't the case two weeks ago, without anybody consciously touching it. I first thought of some Javascript thing happening with the bootstrap slider, but as you can see the testimonial image itself is not affected, even though it's placed in the exact way as the sliders are.
The whole slider is a very simple bootstrap carousel. Excerpts (relevant section) of the code:
<div class="item active">
<div class="row">
<div class="col-sm-8">
<p>"An up-and-coming UK raw food teacher and songstress, Barbara Fernandez has it going on! This girl can do food prep! Her Raw Mexican food is amazing"</p>
<p class="testimonial-author">Nomi Shannon</p>
<p class="testimonial-role">rawgourmet.com</p>
<a class="left carousel-control" href="#testimonial-slider" data-slide="prev"><img src="/media/manual/slider-arrow-left.png"></a>
<a class="right carousel-control" href="#testimonial-slider" data-slide="next"><img src="/media/manual/slider-arrow-right.png"></a>
</div>
<div class="col-sm-4">
<img src="/media/test-nomi-150.jpg" class="img-responsive hidden-xs hidden-sm img-circle" style="margin-left:25px;">
</div>
</div>
</div>
As you can see the images are inserted the exact same way.
What I tried already (no change):
I moved the <img src="/media/manual/slider-arrow-left.png"> out of the link and placed it directly under the working image, the same strange behavior occurs for the slider arrow (by this test I wanted to make sure there's no jquery rule affecting only that one column of the slider, or the a tag).
Hardcoding absolute image URL (src="http://rawrockchick.com/media/manual/slider-arrow-left.png")
WordPress PHP query for image URL (src="<?php echo home_url(); ?>/media/manual/slider-arrow-left.png")
I'd be very thankful if anyone had any ideas about that phenomena. Or idea how to debug it further.
I am not really sure why you are getting a double URL but using an absolute path to your image could help solve things.
<img src="<?php echo home_url(); ?>/media/test-nomi-150.jpg" class="img-responsive hidden-xs hidden-sm img-circle" style="margin-left:25px;">
Solved.
Found it out via disabling plugin for plugin that a Pinterest hover button plugin (this to be precise) was causing that mysterious phenomena.
Thanks for all the answers and hints!
This question is pretty specific, but I'll ask anyways.
First off, I know iframe's are probably not the best design but I don't know how else to solve my problem. Anyways, let me start of with some background information:
I have a page with some WebGL content on it (it just loads a .obj and .mtl model using Three.js, and adds some keyboard navigation for camera movement).
This page is structured so that it gets a variable using php's $_GET array, and then loads the model based on that variable (if the variable was "Bus" then it would load from obj/Bus/Bus.obj, and if the variable was "Shoe" then it would load from obj/Shoe/Shoe.obj).
The link to the page would be like "browser.php?name=Bus" or "browser.php?name=Shoe".
Now, I want to display several of these pages in a carousel of iframes. Because I am using Bootstrap, this task is trivial with the following code:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<iframe src="browser.php?name=Bus" height="500" width="500">
<div class="container">
<div class="carousel-caption">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
<br />
<br />
</div>
</div>
</div>
<div class="item">
<iframe src="browser.php?name=Shoe" height="500" width="500">
<div class="container">
<div class="carousel-caption">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
<br />
<br />
</div>
</div>
</div>
</div>
</div><!-- /.carousel -->
This works perfectly except for one issue, the carousel-caption and all of its content are not showing. I am not sure if this is because of the iframe, or of the WebGL content, because when I just had an image there, its content was showing.
WebGL Iframe Carousel:
Normal Image Carousel:
Finally, my question: How do I fix my code / organization / design so that I can display the WebGL content in a carousel?
Sorry if this is a duplicate, but I was unable to find any relating links on google.
Thanks for taking your time to read/possibly answer this question,
Bucco
[EDIT]:
I just realized that my question was horribly worded, and was not clear enough. My main issue is with the navigator arrows not showing up in the WebGL content carousel (see the images). How do I fix my design / code so that I can display the WebGL content in a carousel with the navigator arrows?
The only obvious thing I see is that the <iframe>s are missing their closing tags, which are actually required according to the W3C (http://www.w3.org/TR/html-markup/iframe.html#iframe-tags).
I assume the normal behavior of an <iframe> is kicking in, which means that any children of the <iframe> are only displayed if the src cannot be loaded. Or, stated another way: lacking the closing tag, it looks like your navigation elements are treated as "fallback" content rather than sibling elements.
In fact, loading your content into a jsFiddle seems to prove me out: http://jsfiddle.net/dRtvH/ - w/o closing tags, no carousel, but simply closing the <iframe>s makes the nav buttons show up.
I'm creating a website for a kiosk. I've got 3 divs on one page, everytime when a div is clicked, next div shows up using a photoslide, and the previous div hides away.
My problem is that when the welcome screen (first div) is showing (the whole page/div is an a tag), the status bar down the bottom shows the linking address all the time. I posted another post, people told me it is not possible to hide the status bar.
So my question is how do I set the cursor to be off screen/off set, so the status bar only shows when a visitor is interacting with the screen.
Can I set the cursor offset using javascript, html/css or php? Any code/suggestions is appreciated.
Thanks!
Here is my html page below or see http://jsfiddle.net/EXfnN/8/
<div id="item1" class="item">
<div class="content">
<a href="#item2" class="panel">
<video id="my_Video" width="100%" height="100%" preload="auto" autoplay loop>xxxxxx
</video>
</a>
</div>
</div>
<div id="item2" class="item">
<div class="content">
<div id="back">
<ul id="awesome-menu">
<li>
ABC
</li>
<li>
National
</li>
<li>
Other
</li>
</ul>
</div>
</div>
</div>
<div id="item3" class="item">
<div class="content">
<img src="images/thankyou.jpg" alt="Thank you" /></div>
</div>
I'd suggest that if you're using JavaScript for this, that you don't need ANCHOR tags because you've already negated the need for them.
I'd suggest changing to adding click events to the div tags and storing additional application data on "data-" attributes and reading those with JavaScript instead.
This workaround eliminates a few problems like the one above.
you could make the first element a div only (without the a tag) catch the onclick event and then redirect via javascript (or do whatever action the a tag has)?