I have implemented the Codrops Expanding Preview script on a clients site. Everything is working great with the exception of one small glitch myself and team cannot figure out. We were able to customize the button text and add a new button ("Read Story" became LinkedIn which utilizes the href="" + we added Twitter which utilizes tag=""). Everything works well if you go from one item on the right and open another item on the left, but if you expand a preview on the left without a Twitter link and expand a preview on the right with a Twitter link - it saves the data from the previous expanded preview and does not show the Twitter link on the newly expanded preview because the other item did not have a Twitter link.
Here's the line of code showing the tag being utilized:
<a href="linked in url here" tag="#" data-largesrc="image url here" data-title="name here" data-description="description here ">
The tag="#" uses a # when there is no Twitter link.
In grid.js, we have added this to look for the # in the tag and have it display:none; -
if((eldata.tag).indexOf('#') >= 0) {
this.$tag.attr( 'style', 'display:none;' );
} else { this.$tag.attr( 'href', eldata.tag);
}
It seems to hold that value across all expanded previews and doesn't reload the data.
Is there any type of work around for this?
Related
I have a white box covering my content when viewing the website on a mobile phone not including tablets. It occurs once at the top under the first image slider, then again towards the bottom of the page... covering up a photo.
The website url is designandcrate.com
I have tried removing tags and adding tags so that the content will show up.
[span6]
[service_box title="Professional Staging with a Fresh Approach!!" subtitle=" With over 25 years of interior design experience in the residential and commercial world I am ready to focus on the area of staging! I recently renovated and staged a house in FL and loved the process and used new and older pieces to give a more realistic and fresh approach to the sometimes stagnant world of staging as a result!" icon="no" text="click "More" btn_text="See More" btn_link="#" btn_size="normal" target="_blank" custom_class="extra"]
[/span6]
I expected to see the content on my website, but can not see the content because of a white box covering the content.
ALSO a new discovery is that the issue could be a media query issue. Below is a photo of a string of code that could be related to what I am referring to.
image of code relating to media query
Screenshot of mobile view
Mobile view
mobileview
p.s. Sorry if I was not supposed to put a URL I am new to the forum...
UPDATE I have found a temporary fix to show content... but it does not get rid of the box itself that is causing a big space with nothing in it...
Here is the link to a video of how I did this.
https://imgur.com/r9dCzDz
Try adding in your themes' custom CSS area the following:
.header:before {
background: none !important;
}
Problem solved -- Thank you for the help.
.header .header_block {
border-radius:2px
}
.camera_wrap {
padding-top:30px;
margin-bottom:-80px;
}
body.home .header:before {
height:auto;
}
.clearfix {
padding:10px;
}
I have an account with Simple In/Out. We have 50+ employees and display their statuses (In/Out of office) on a TV at the receptionist desk. However we can't fit all of the employees on the screen without scrolling.
Simple In/Out provides very limited styling to how the list is shown. With CSS I could remove dead space and visually improve the list.
At first I would inspect element and make a few changes however the screen would get refreshed and all changes lost.
I am trying to simply make a .html page that displays an iFrame of the List with Local CSS edits.
The list url is simpleinout.com/list- login and the list displays.
The following 2 files display the page and an appended CSS file with changes however if I click anywhere else the CSS file is removed.
simple.html:
<html>
<head></head>
<body>
<iframe src="http://localhost/~JohnHarbert/simple.php" style="border: 0" width="1920" height="1080" frameborder="0" scrolling="no" ></iframe>
</body>
</html>
simple.php:
<?php
$content = file_get_contents('http://www.simpleinout.com/list');
$content = str_replace('<head>','<base href="https://www.simpleinout.com/" /><head>', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://localhost/~JohnHarbert/style.css" /></head>', $content);
echo $content;
?>
Again. The code does append the css file on the initial load(It adds it just before ). But when I click to display list. The css file is no longer added inside the Iframe.
You're help is much appreciated.
I'm the web developer behind Simple In/Out.
The easiest way to fit more users on your screen would be to use the font/column controls in the upper right. Once you've entered Full Screen mode, click on the gear icon in the upper right. It will allow you to choose anywhere from 2 to 6 columns of users and you can adjust the font size to fit more on the screen.
Hope that helps!
We're trying to create a trackback system where an outside web publisher can put some html on a page on their website that links back to a specific product page on our site. Let's call it a 'badge' for purposes of this question.
Once they've inserted the badge, we want to identify this, then grab the < h1 > and first < p > as a teaser to comprise a link from our site back to theirs and write all this stuff to our database. Then, our users can see the title and first bit of their page, then decide if they want to see more.
Here's what we've done (not much I'm afraid):
<a href="http://www.mysite.com/abc.html">
<img alt="abc" src="http://www.mysite.com/logo.gif" style="width:200px;height:100px" />
</a>
We're planning to build an admin page to do the last part of grabbing the < h1> and < p> and posting it to the live database, etc. and we'll figure this out later.
However, the middle step (identifying that this piece of html has been used) we're at a loss.
Is this something we should be doing through a log file....I have no clue even how to begin thinking about it.
A little direction of where to begin working on this problem would be very helpful.
Thanks in advance!!
This is one approach.
You give them HTML which looks something like:
<a href="http://www.mysite.com/abc.html">
<img alt="abc" src="http://www.mysite.com/logo.php" style="width:200px;height:100px" />
</a>
Notice that says logo.php, not logo.gif.
logo.php will live on your server. Its purpose is twofold:
Gather information about the page holding the <img> tag
Load and output logo.gif so the users see the image as expected.
If you embed that html on a webpage somewhere, logo.php will have information about where the request for the image originated. Specifically, $_SERVER['HTTP_REFERER'] will give you the complete URL to the page where the img tag resides. It is then up to you to decide how to process and store that information.
I don't know exactly what you want to do, but a very simplified logo.php would look something like this:
<?php
$url = $_SERVER['HTTP_REFERER'];
// do something with $url...
// it will be something like "http://theirsite.com/wherever/they/pasted/the.html"
// now output the logo image...
header("Content-Type: image/gif");
echo file_get_contents("/path/to/logo.gif");
Keep in mind that every time anyone hits their page with the image tag, logo.php will be run. So don't accidentally create 10000 links back to their site on your site :)
I embed videos into my web site, works great in all browsers but on firefox shows up a black screen, any idea? Using the iframe mode. Funniest thing is that some show up and some don't using the same embed method for all.
rob.m - yup, showing and hiding vimeo videos will cause that random black screen to appear. I JUST ran into this on a project, and tore my hair out for the better part of a day figuring out why.
If you NEED to show/hide videos, and you NEED the black screen to not show up, you will have to use the old school flash embed. That will work.
It's a trade off - consistent embed images = flash OR inconsistent embed images = universal method (read: HTML5 w/ flash fallback).
[Brief rant: the Vimeo API documentation leaves a LOT to be desired]
If you need to further interact with these videos that you show/hide, and plan to use the Vimeo API to do so, I found that I had to use the SWFobjects library method. See this forum post for more: http://vimeo.com/forums/topic:44521 - specifically, the second to last post.
Eventually i came up with using this:
In the main page I have a element which i then populate and replace with the iframe. Thanks
Main page:
<span class="video clearfix" data-vimeoid="<?php echo the_field('vimeo') ?>"></span>
Content page to be loaded:
var url = this.href + " .content";
var videoSpan = infoBox.find("span.video");
var iframe = $('<iframe/>', {
'frameborder' : 0,
'width' : '692',
'height' : '389',
'src' : 'http://player.vimeo.com/video/'+ videoSpan.data("vimeoid") +'?autoplay=0&api=1'
});
videoSpan.replaceWith(iframe);
Basically I have a slightly non-standard implementation of FancyBox. By default you have to include a link to the large version of the image so that the Lightbox can display it. However, in my implementation, the image link URLs point to a script rather than directly to the image file. So for example, instead of:
<a href="mysite/images/myimage.jpg" rel="gallery">
I have:
<a href="mysite/photos/view/abc123" rel="gallery">
The above URL points to a function:
public function actionPhotos($view)
{
$photo=Photo::model()->find('name=:name', array(':name'=>$view));
if(!empty($photo))
{
$this->renderPartial('_photo', array('photo'=>$photo, true));
}
}
The "$this->renderPartial()" bit simply calls a layout file which includes a standard HTML tag to output.
Now when the user clicks on a thumbnail, the above function is called and the large image is displayed in the Lightbox.
Now if the user right clicks on the thumbnail and selects "open in new tab/window" then the image is displayed in the browser as per normal, i.e. just the image. I want to change this so that it displays the image within a layout.
In the above code I can include the following and put it in an IF statement:
$this->render('photos', array('photo'=>$photo));
This will call the layout file "photos" which contains the layout to display the image in.
I have a specific limitation for this - the image URL must remain the same, i.e. no additional GET variables in the URL. However if we can pass in a GET variable in the background then that is OK.
I will most likely need to change my function above so that it calls a different file for this functionality.
EDIT: To demonstrate exactly what I am trying to do, check out the following:
http://www.starnow.co.uk/KimberleyMarren
Go to the photos tab and hover over a thumbnail - note the URL. Click the thumbnail and it will open up in the Lightbox. Next right click on that same thumbnail and select "open in new tab/new window". You will notice that the image is now displayed in a layout. So that same URL is used for displaying the image in the Lightbox and on its own page.
The way StarNow have done this is using some crazy long JavaScript functionality, which I'm not too keen on replicating.
The html link should point to the layout showing the image on a new page by default, e.g.:
<a href="mysite/images/show/123" rel="gallery">
Before the lightbox opens, append a query string to the url in order to distinguish it from the normal link and load the layout for the lightbox. As soon as the image is loaded in the lightbox, change the link back to its original state.
$("a[rel=gallery]").fancybox({
'onStart': function (selectedArray, selectedIndex, selectedOpts) {
var el = $(selectedArray[selectedIndex]);
el.attr('href', el.attr('href') + '?mode=lightbox');
},
'onComplete': function (currentArray, currentIndex, currentOpts) {
var el = $(currentArray[currentIndex]);
el.attr('href', el.attr('href').split("?")[0]);
}
});
You will then have to process the following link in order to return the lightbox layout:
<a href="mysite/images/show/123?mode=lightbox" rel="gallery">
You should be able to modify the JavaScript function that generates the HTML with the <img /> tag to link the image to such a page. Although, if you are trying to make it so that selecting "Open image in new tab" opens a page like this, then that might be impossible (unless there is some sort of crazy cookie/session implementation to alternate between the image script just passing an image and generating a page, which I think could be possible). To assign a new href for the link to have when you click "Open link in new tab" should be quite possible by just modifying the JavaScript function.
Could you clarify what exactly you are attempting to do? Open link in new tab or open image in new tab?
Edit: It appears that the FancyBox script is changing the href of your link to point directly to the image. You would need to find where in the script it is selecting each link tag with rel="gallery" and replacing the href to point to the images; you will want it to not change the href if you want it left as "mysite/photos/view/abc123", for example.
If you need the same functionality the demo site you posted is using, then this is easy to achieve, but keep in mind that the site is NOT using the same URL for both the pop-up and the standalone image page.
Click on any thumbnail with Firebug console is open, you'll notice that it's making an Ajax request to get the image from a different URL! which is an obvious behavior.
http://www.starnow.co.uk/profile/PhotosTrackView.aspx?photo_id=2129864
While the link is pointing to:
http://www.starnow.co.uk/KimberleyMarren/photos/2129864/
you see your links should point to the correct image page, in case of JS disabled browsing or right clicking (as you mentioned) AND using JS to override the link default behavior (which is redirecting you to the image page).
So for example you can have a method that will generate your image layout/page, and this should be used as href; and override the click event of the link to call a similar method (using ajax) but this time it'll retrieve the image itself to use it in your lightbox.